MUI_Ajax

来源：互联网发布：时间线软件编辑：程序博客网时间：2024/06/05 06:58

功能：

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}}});// downindexsub = 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从 全局数组中查找对应的objectfor (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: '张三',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;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);}},error: function(code, type, 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请求，并做出响应）

@Overrideprotected 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();}

效果图

2 0