一、用户登录验证 (给服务器提交数据)
//输入maj,然后回车键,一堆代码就自动出来了,爽asdf
mui.ajax(url,{
data:{
username:'admin',
password:'123456'
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
//服务器返回响应,根据响应结果,分析是否登录成功;
console.log(‘登录成功’);//这里不做验证,只是测试访问
},
error:function(xhr,type,errorThrown){
//异常处理;
console.log(type);
}
});
二、读取数据库,然后写入列表 (从服务器解析JSON数据)
1.首先在某个位置,例如底部放置一个ul,给个ID。
<div class="mui-bottom">
<ul class="mui-table-view" id="list">
//这里应该有li项的,但我们让它自动生成,数据有多少行,li就有多少个
</ul>
</div>
2.读取数据库中的数据
mui.ajax(url,{//url可以是一个php接口文件
data:{
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒;
success:function(data){
//可以直接解析JSON,浏览器控制台输出来,例如谷歌浏览器,按F12,选择控制台窗口就可以看到输出了。
// console.log(JSON.stringify(data));
//下面才是重头戏,动态输出li选项
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
var li;
//遍历获得的数据集data
mui.each(data,function (key,value) {
//定义变量接收数据库字段的值
var id = value.id;
title = value.title;
detail = value.detail;
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right" id='+ id +' data-audio='+ name +'>'+
'<div class="mui-media-body">'+title+
'<p class="mui-ellipsis">'+detail+'</p>'+
'<p class="mui-ellipsis">途径:A站,广州站</p>'+
'</div>'+
'</a>';
fragment.appendChild(li);
})
list.appendChild(fragment);
},
error:function(xhr,type,errorThrown){
alert("错误");
console.log(type);
}
});
网友评论