<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>M-BOX</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">
<!--标准mui.css-->
<link rel="stylesheet" href="../css/mui.min.css">
<style type="text/css">
.mui-content>.mui-table-view:first-child {
margin-top: 0px;
}
</style>
</head>
<body>
<div class="mui-content">
<ul id="list" class="mui-table-view mui-table-view-chevron"></ul>//Here we can list the contents from the js below!The UL's id is #list and the class is "mui-table-view mui-table-view-chevron".
</div>
</body>
<script src="../js/mui.min.js "></script>
<script src="../js/mui.lazyload.js"></script>
<script src="../js/mui.lazyload.img.js"></script>
<script>
mui.init();
var url = "http://58.218.0.39:8086/ecmsapi/index.php?mod=news&act=newslist"; //Here is the json's resource. 请求发送的目标地址
mui.ajax(url,{
data: { //data：发送到服务器的业务数据；
'type': 1,
'limit': 10
},
dataType:'json',//服务器返回json格式数据
type:'post',//HTTP请求类型
timeout:10000,//超时时间设置为10秒；
success:function(data){ //成功后的操作，参数就是上面的data
console.log(JSON.stringify(data)); //控制台打印json数据，实际使用时注释掉；
var newsdata=data;
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
var li;
mui.each(newsdata,function(index,item){
var id = item.id;
title = item.title;
username = item.username;
titlepic = item.titlepic;
newstext = item.newstext;
newspath=item.newspath;
userfen=item.userfen;
classid=item.classid;
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML =
'<a id='+ id +
'<div>'+title+
'<p>'+username+'</p>'+
'<p>'+newspath+'</p>'+
'<p>'+newstext+'</p>'+
'<p>'+id+'</p>'+
'<p>'+userfen+'</p>'+
'<p>'+classid+'</p>'+
'<img src="http://58.218.0.39:8086'+titlepic+'">'+
'</div>'+
'</a>';
fragment.appendChild(li);
})
list.appendChild(fragment)
mui(document).imageLazyload({
placeholder: '../img/60x60.gif'
});
},
error:function(xhr,type,errorThrown){
//异常处理；
// console.log(type);
}
});
//列表点击事件
mui("#list").on('tap','li a',function(){
var title = this.getAttribute('title');
var newstext = this.getAttribute('newstext');
var titlepic = this.getAttribute('titlepic');
//打开详情页面
mui.openWindow({
url:'music.html',
id:'music.html',
extras:{
newstitle:title,
newscontent:newstext,
}
});
});
</script>
</html>-
-
url：请求发送的目标地址
-
settings：key/value格式的json对象，用来配置ajax请求参数，支持的参数如下：
-
-
data：发送到服务器的业务数据；
-
type：请求方式，目前仅支持'GET'和'POST'，默认为'GET'方式；
-
dataType：预期服务器返回的数据类型；如果不指定，mui将自动根据HTTP包的MIME头信息自动判断；
支持设置的dataType可选值：-
"xml": 返回XML文档
-
"html": 返回纯文本HTML信息；
-
"script": 返回纯文本JavaScript代码
-
"json": 返回JSON数据
-
"text": 返回纯文本字符串
-
-
success：Type: Functon（Anything data,String textStatus,XMLHttpRequest xhr）
请求成功时触发的回调函数，该函数接收三个参数：-
data：服务器返回的响应数据，类型可以是json对象、xml对象、字符串等；
-
textStatus：状态描述，默认值为'success'
-
xhr：xhr实例对象
-
-
error：Type: Functon（XMLHttpRequest xhr,String type,String errorThrown）请求失败时触发的回调函数；
该函数接收三个参数： -
mui.ajax( url, { data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒； success:function(data){ //服务器返回响应，根据响应结果，分析是否登录成功； }, error:function(xhr,type,errorThrown){ //异常处理； console.log(type); } } );
-
-
