Ajax

最新推荐文章于 2019-12-17 15:23:31 发布

年轻正好

最新推荐文章于 2019-12-17 15:23:31 发布

阅读量404

点赞数

分类专栏： MUI 文章标签： ajax mui 数据渲染数据请求新闻数据加载

本文链接：https://blog.csdn.net/MyFuture_MyDream/article/details/53418287

版权

MUI 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Ajax

mui提供了mui.ajax方法，并在mui.ajax方法基础上，进一步简化出最常用的mui.get()、mui.getJSON()、mui.post()三个方法。使用mui.ajax方法很简单。进行相关配置，填写请求地址，然后在success中对返回数据的解析和渲染。mui.ajax('http://server-name/login.php',{ data:{ username:
复制链接

扫一扫

专栏目录

Ajax

“相关推荐”对你有帮助么？