Ajax

来源：互联网发布：windows media 解码器编辑：程序博客网时间：2024/06/03 17:08

mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。
使用mui.ajax方法很简单。进行相关配置，填写请求地址，然后在success中对返回数据的解析和渲染。

mui.ajax('http://server-name/login.php',{data:{username:'username',password:'password'},dataType:'json',//服务器返回json格式数据type:'post',//HTTP请求类型timeout:10000,//超时时间设置为10秒；headers:{'Content-Type':'application/json'},              success:function(data){//服务器返回响应，根据响应结果，分析是否登录成功；...},error:function(xhr,type,errorThrown){//异常处理；console.log(type);}});

示例~~~

<body><header class="mui-bar mui-bar-nav"><h1 class="mui-title">Ajax</h1></header><div id="mui-content" class="mui-content"></div><script src="../../js/mui.min.js"></script><script type="text/javascript">mui.init();/*ajax是h5+api*/mui.plusReady(function() {mui.ajax('http://c.m.163.com/nc/article/headline/T1348647853363/0-20.html?from=toutiao&passport=&devId=OPdeGFsVSojY0ILFe6009pLR%2FMsg7TLJv5TjaQQ6Hpjxd%2BaWU4dx4OOCg2vE3noj&size=20&version=5.5.3&spever=false&net=wifi&lat=&lon=&ts=1456985286&sign=%2BY9lXIDh3W7j69unWYNEiSG3So2sMceBy%2B%2FiFf2ZfHh48ErR02zJ6%2FKXOnxX046I&encryption=1&canal=appstore', {dataType: 'json', //服务器返回json格式数据type: 'get', //HTTP请求类型timeout:5000,//等待相应时间，超出则出现异常/*处理数据成功返回*/success: function(data) {  titleDataAnalyze(data);},/*处理异常情况返回*/error: function(error) {console.log("数据返回失败");}});   });        function titleDataAnalyze(data) {var Ads = data.T1348647853363[0].ads;var AdList = null;/*创建ul元素*/var muiTableView = document.createElement('ul');muiTableView.setAttribute("class", "mui-table-view");muiTableView.setAttribute("id", "list");/*将ul元素接到mui-content上*/var muiContent = document.getElementById('mui-content');muiContent.appendChild(muiTableView);for(var i = 0; i < Ads.length; i++) {var title = Ads[i].title;/*动态创建元素*/console.log(title);/*创建li元素*/var muiTableViewCell = document.createElement('li');muiTableViewCell.setAttribute("class","mui-table-view-cell");/*将内容添加上li上*/  muiTableViewCell.innerText = title;/*将li追加到ui的内后*/   muiTableView.appendChild(muiTableViewCell);}}</script></body>

实现效果~~~向填写地址请求数据，然后在success中解析参数，并渲染到列表中。

0 0