前提条件:
1.ajax正常启动,并进入回调函数
2.在回调函数中能得到后台传过来的json数据
如图:
代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Hello MUI</title> <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <link rel="stylesheet" href="../css/mui.min.css"> <style> .mui-content-padded { padding: 10px; } body, body .mui-content { background-color: #fff !important; } code { word-wrap: break-word; word-break: normal; font-size: 90%; color: #c7254e; background-color: #f9f2f4; border-radius: 4px; } </style> </head> <body> <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">json测试</h1> </header> <div class="mui-content"> <div class="mui-button-row"> <button type="button" id="confirm" class="mui-btn mui-btn-primary">查询</button> </div> <ul class="mui-table-view public-style" style="margin-bottom: 60px;" id="listMoblie"> </ul> </div> <script src="../js/mui.min.js"></script> <script> (function($) { //成功响应的回调函数 var success = function() { console.log('成功响应的回调函数!'); console.log(date); var json = eval(date); //数组 var sel = ""; $.each(json, function() { sel = sel + "<li class='mui-table-view-cell'>"; sel = sel + "<div class='mui-table'>"; sel = sel + "<a id='sellShow'>"; sel = sel + "<div class='mui-table-cell mui-col-xs-10'>"; sel = sel + "<div class='mui-ellipsis'>渠道/门店名称:" + this.shop + "<span style='float: left;'>日期:" + this.date+ "</span></div>"; sel = sel + "</div>"; sel = sel + "<div class='mui-table-cell mui-col-xs-5'><div class='mui-ellipsis'>单号:" + this.odd + "<span style='float: left;'>客户名称:" + this.name + "</span></div></div>"; sel = sel + "</a>"; sel = sel + "<div class='mui-table-cell mui-col-xs-3 mui-text-right'>"; sel = sel + "<div class='mui - input - row mui - checkbox ' style='height: 40 px;'>"; sel = sel + "<input name='checkbox1' value='Item 3' type='checkbox' style='margin-top:9px; margin-right: -20px;'><label></label>"; sel = sel + "</div>"; sel = sel + "</div>"; sel = sel + "</li>"; }); document.getElementById("listMoblie").innerHTML = sel; }; var ajax = function() { console.log('进入Ajax方法...'); var url = 'http://192.168.0.101:8080/Test_Json/login'; var type = 'post'; var dataType = 'html'; var data = { name: 'nameEL.value', password: 'passwordEl.value' }; $.post(url, data, success, dataType); }; //发送请求按钮的点击事件 document.getElementById("confirm").addEventListener('tap', function() { console.log('网络正常,正在发送请求...'); ajax(); }); })(mui); </script> </body> </html> |
效果图: