【第一课学习】mui.ajax跨域绑定列表实例 by Xueby_H5之家

Asp.Net的MVC4版后台请求json代码
public JsonResult GetUserInfo()
{
List<Member> list = _memberService.GetTopMemberList(10, "1=1", "MemberId Desc");
var dataList = list.Select(p => new
{
p.UserName,
p.Email
});
//ajax请求必须加
HttpContext.Response.AppendHeader("Access-Control-Allow-Origin", "*");
HttpContext.Response.AppendHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
return Json(new { dataList, result = true }, JsonRequestBehavior.AllowGet);
}

前台html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<script src="js/mui.min.js"></script>
<link href="css/mui.min.css" rel="stylesheet" />
<script type="text/javascript" charset="utf-8">
(function($) {
mui.ajax({
type: "GET",
url: ":8080/mobile/Member/GetUserInfo", //跨域URL
dataType: "json",
success: function(data) {
//alert(JSON.stringify(data.dataList));
var list = document.getElementById("list");
var fragment = document.createDocumentFragment();
var li;
mui.each(data.dataList, function(index, item) {

var id = item.UserName,
name = item.UserName,
author = item.UserName,
picUrl = item.UserName
li = document.createElement('li');
li.className = 'mui-table-view-cell mui-media';
li.innerHTML = '<a class="mui-navigate-right">' +
'<img class="mui-media-object mui-pull-left" src=""/>' +
'<div class="mui-media-body">' + name +
'<p class="mui-ellipsis">' + author + '</p>' +
'</div>' +
'</a>';
fragment.appendChild(li);
})
list.appendChild(fragment)

}
});
})(mui);
</script>
</head>
<body>
<div class="mui-content">
<ul id="list" class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right">
<img class="mui-media-object mui-pull-left" data-lazyload-id="0" src="?version=447.4190210457891">
<div class="mui-media-body">
主标题
<p class="mui-ellipsis">列表二级标题</p>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>