MUI_Ajax

MUI下拉刷新结合AJAX 实现网络交互，动态添加元素并追加相应的tap事件

ps：MUI 下拉刷新控件滑动部分是完整的webview（子webview）。所以需要在父webView中创建一个单独的webview。

模块：

pullrefresh.html：下拉刷新父webview

pullrefersh_child.html ：下拉刷新子webview

pullrefresh.html:

<!DOCTYPE html>
<html>

	<head>
		<Meta charset="UTF-8">
		<link rel="stylesheet" href="css/mui.css" />
		<title>下拉刷新</title>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><font size="4">返回</font></a>
			<h1 class="mui-title">下拉刷新</h1>
		</header>
		<div class="mui-content"></div>
	</body>
	<script src="js/mui.js"></script>
	<script>
		mui.init({
			subpages: [{
				url: 'pullrefersh_child.html',id: 'pullrefersh_child',styles: {
					top: '45px',bottom: '0px',}
			}]
		});
	</script>

</html>

pullrefersh_child.html:

<!DOCTYPE html>
<html>

	<head>
		<Meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
				</ul>
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#refreshContainer',down: {
						contentdown: '下拉刷新哦',contentover: '释放即可刷新哦',contentrefresh: '正在刷新哦',callback: pulldownrefresh
					},up: {
						contentrefresh: '正在刷新哦',callback: pulluprefresh
					}
				}
			});
			// down
			indexsub = 0;
			var dataAllArray = new Array();
			/*
			 * 下拉刷新
			 * */
			function pulldownrefresh() {
				indexsub++;
				var urls = "http://192.168.1.1:8080/tt/login";
				var jsondata = {
					name: '张三',pwd: '123456',index: indexsub
				};
				params = JSON.stringify(jsondata);
				console.log('params = ' + params);
				mui.ajax(urls,{
					data: params,type: 'POST',timeout: 10000,success: function(data) {
						plus.nativeUI.closeWaiting();
						var obj = JSON.parse(data);
						rescode = obj.resCode;
						console.log('rescode = ' + rescode);
						if (rescode == 200) {
							var response = obj.resPonse;
							if (response.length <= 0) {
								plus.nativeUI.toast('哎呀,没有更多数据了');
								mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
								return;
							}
							tableview = document.body.querySelector('.mui-table-view');
							// 全局数组中追加新数据,目的设置item的tap事件可以根据 id从 全局数组中查找对应的object
							for (var i = 0; i < response.length; i++) {
								dataAllArray.push(response[i]);
							}
							// 查询当前子元素个数 （class:mui-table-view-cell）
							cellindex = document.body.querySelectorAll('.mui-table-view-cell');
							for (var k = cellindex.length; k < dataAllArray.length; k++) {
								// 绘制li元素
								//******************************模版一（简单li）*************************							
								//								li_ = document.createElement('li');
								//								li_.id = k;
								//								li_.className = 'mui-table-view-cell';
								//								li_.innerText = dataAllArray[k].name;
								//								if (cellindex.length != 0) {
								//									tableview.insertBefore(li_,tableview.firstChild);
								//								} else {
								//									tableview.appendChild(li_);
								//								}
								//******************************模版二（带图片li）*************************
								var li_ = document.createElement('li');
								li_.className = "mui-table-view-cell mui-media";
								li_.id = k;
								var a_ = document.createElement('a');
								a_.href = "#";
								//a_.id = i;
								var img_ = document.createElement('img');
								img_.className = 'mui-media-object mui-pull-left';
								img_.src = 'images/cbd.jpg';
								var div_ = document.createElement('div');
								div_.className = 'mui-media-body';
								div_.innerText = dataAllArray[k].name;
								var p_ = document.createElement('p');
								p_.className = 'mui-ellipsis';
								p_.innerText = '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？';
								div_.appendChild(p_);
								a_.appendChild(img_);
								a_.appendChild(div_);
								li_.appendChild(a_);
								if (cellindex.length != 0) {
									tableview.insertBefore(li_,tableview.firstChild);
								} else {
									tableview.appendChild(li_);
								}
							}
							mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
						} else {
							rescontent = obj.resStr;
							alert("error:" + rescode + "\nmsg:" + rescontent);
						}
					},error: function(code,type,msg) {
						alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
					}
				});
			}
			/**
			 * 上滑加载更多
			 */
			function pulluprefresh() {
				indexsub++;
				var urls = <a target=_blank href="http://192.168.1.1:8080/tt/login">http://192.168.1.1:8080/tt/login</a>;
				var jsondata = {
					name: '张三',success: function(data) {
						plus.nativeUI.closeWaiting();
						var obj = JSON.parse(data);
						rescode = obj.resCode;
						console.log('rescode = ' + rescode);
						if (rescode == 200) {
							var response = obj.resPonse;
							tableview = document.body.querySelector('.mui-table-view');
							if (response.length <= 0) {
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); // true 表示 没有更多数据
							} else {
								for (var i = 0; i < response.length; i++) {
									dataAllArray.push(response[i]);
								}
								// 查询当前子元素个数 （class:mui-table-view-cell）
								cellindex = document.body.querySelectorAll('.mui-table-view-cell');
								for (var k = cellindex.length; k < dataAllArray.length; k++) {
									//******************************模版一（简单li）*************************	
									//									li_ = document.createElement('li');
									//									li_.id = k;
									//									li_.className = 'mui-table-view-cell';
									//									li_.innerText = dataAllArray[k].name;
									//******************************模版二（带图片li）*************************
									var li_ = document.createElement('li');
									li_.className = "mui-table-view-cell mui-media";
									li_.id = k;
									var a_ = document.createElement('a');
									a_.href = "#";
									//a_.id = i;
									var img_ = document.createElement('img');
									img_.className = 'mui-media-object mui-pull-left';
									img_.src = 'images/cbd.jpg';
									var div_ = document.createElement('div');
									div_.className = 'mui-media-body';
									div_.innerText = dataAllArray[k].name;
									var p_ = document.createElement('p');
									p_.className = 'mui-ellipsis';
									p_.innerText = '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？';
									div_.appendChild(p_);
									a_.appendChild(img_);
									a_.appendChild(div_);
									li_.appendChild(a_);
									tableview.appendChild(li_);
								}
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); // true 表示 没有更多数据
							}
						} else {
							rescontent = obj.resStr;
							alert("error:" + rescode + "\nmsg:" + rescontent);
						}
					},msg) {
						alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
					}
				});
			}
			// item 点击事件
			mui('.mui-table-view').on('tap','li',function() {
				id = this.getAttribute('id');
				obj = dataAllArray[id];
				alert('name = ' + obj.name + "\npwd = " + obj.pwd + "\nage = " + obj.age);
			});
		</script>
	</body>

</html>

服务端（接收mui.ajax的post请求，并做出响应）

@Override
	protected void doPost(HttpServletRequest req,HttpServletResponse resp)
			throws ServletException,IOException {
		String requets = IoUtils.toString(req.getInputStream(),"utf-8");
		System.out.println("requets = " + requets);
		Gson mGson = new Gson();
		UserVo muser = mGson.fromJson(requets,UserVo.class);
		System.out.println("getIndex = " + muser.getIndex());
		int index = Integer.parseInt(muser.getIndex());
		JSONObject mJsonObject = new JSONObject();
		mJsonObject.put("resCode","200");
		mJsonObject.put("resStr","请求成功");
		JSONArray mArray = new JSONArray();
		if (index == 1) {
			count = 1;
		}
		if (index > 3) {

		} else {
			for (int i = 0; i < 5; i++) {
				JSONObject mJsonObjects = new JSONObject();
				mJsonObjects.put("name","张三" + count);
				mJsonObjects.put("pwd","123456" + count);
				mJsonObjects.put("age","20" + count);
				mArray.add(mJsonObjects);
				count++;
			}
		}
		mJsonObject.put("resPonse",mArray);
		OutputStream out = resp.getOutputStream();
		out.write(mJsonObject.toString().getBytes("UTF-8"));
		out.close();

	}

效果图

原文链接：https://www.f2er.com/ajax/162281.html

猜你在找的Ajax相关文章