Preconditions:
1. Ajax starts normally and enters the callback function
2. The json data sent from the background can be obtained in the callback function
As shown in the figure:
code show as below:
<!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>var sel = "";var json = eval(date); / /arrayconsole.log(date);console.log('Callback function for successful response!');var success = function() {//Callback function for successful response (function($) { $.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', //Send the click event of the request button};$.post(url, data, success, dataType);}; password: 'passwordEl.value' document.getElementById("confirm").addEventListener('tap', function() { console.log('The network is normal, sending a request...'); ajax(); }); })(mui); < /script> </body> </html> |
Effect picture: