MUI_Ajax

最新推荐文章于 2020-05-28 17:19:08 发布
最新推荐文章于 2020-05-28 17:19:08 发布
阅读量9.8k 收藏 3
点赞数 4
分类专栏： React Native 文章标签： mui.ajax mui下拉刷新
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zcmain/article/details/51163884
版权

功能：

       MUI 下拉刷新 结合AJAX 实现网络交互，动态添加元素并追加相应的tap事件

       ps：MUI 下拉刷新控件滑动部分是完整的webview（子webview）。所以需要在父webView中创建一个单独的webview。

模块：

      pullrefresh.html： 下拉刷新父webview

      pullrefersh_child.html ：下拉刷新子webview


pullrefresh.html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="css/mui.css" />
		<title>下拉刷新</title>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: white;"><font size="4">返回</font></a>
			<h1 class="mui-title">下拉刷新</h1>
		</header>
		<div class="mui-content"></div>
	</body>
	<script src="js/mui.js"></script>
	<script>
		mui.init({
			subpages: [{
				url: 'pullrefersh_child.html',
				id: 'pullrefersh_child',
				styles: {
					top: '45px',
					bottom: '0px',
				}
			}]
		});
	</script>

</html>


pullrefersh_child.html:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/mui.css" />
		<link rel="stylesheet" href="../css/mui.min.css">
	</head>

	<body>
		<!--下拉刷新容器-->
		<div id="refreshContainer" class="mui-content mui-scroll-wrapper">
			<div class="mui-scroll">
				<!--数据列表-->
				<ul class="mui-table-view mui-table-view-chevron">
				</ul>
			</div>
		</div>

		<script src="js/mui.js"></script>
		<script>
			mui.init({
				pullRefresh: {
					container: '#refreshContainer',
					down: {
						contentdown: '下拉刷新哦',
						contentover: '释放即可刷新哦',
						contentrefresh: '正在刷新哦',
						callback: pulldownrefresh
					},
					up: {
						contentrefresh: '正在刷新哦',
						callback: pulluprefresh
					}
				}
			});
			// down
			indexsub = 0;
			var dataAllArray = new Array();
			/*
			 * 下拉刷新
			 * */
			function pulldownrefresh() {
				indexsub++;
				var urls = "http://192.168.1.1:8080/tt/login";
				var jsondata = {
					name: '张三',
					pwd: '123456',
					index: indexsub
				};
				params = JSON.stringify(jsondata);
				console.log('params = ' + params);
				mui.ajax(urls, {
					data: params,
					type: 'POST',
					timeout: 10000,
					success: function(data) {
						plus.nativeUI.closeWaiting();
						var obj = JSON.parse(data);
						rescode = obj.resCode;
						console.log('rescode = ' + rescode);
						if (rescode == 200) {
							var response = obj.resPonse;
							if (response.length <= 0) {
								plus.nativeUI.toast('哎呀,没有更多数据了');
								mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
								return;
							}
							tableview = document.body.querySelector('.mui-table-view');
							// 全局数组中追加新数据,目的设置item的tap事件可以根据 id从 全局数组中查找对应的object
							for (var i = 0; i < response.length; i++) {
								dataAllArray.push(response[i]);
							}
							// 查询当前子元素个数 （class:mui-table-view-cell）
							cellindex = document.body.querySelectorAll('.mui-table-view-cell');
							for (var k = cellindex.length; k < dataAllArray.length; k++) {
								// 绘制li元素
								//******************************模版一（简单li）*************************							
								//								li_ = document.createElement('li');
								//								li_.id = k;
								//								li_.className = 'mui-table-view-cell';
								//								li_.innerText = dataAllArray[k].name;
								//								if (cellindex.length != 0) {
								//									tableview.insertBefore(li_, tableview.firstChild);
								//								} else {
								//									tableview.appendChild(li_);
								//								}
								//******************************模版二（带图片li）*************************
								var li_ = document.createElement('li');
								li_.className = "mui-table-view-cell mui-media";
								li_.id = k;
								var a_ = document.createElement('a');
								a_.href = "#";
								//a_.id = i;
								var img_ = document.createElement('img');
								img_.className = 'mui-media-object mui-pull-left';
								img_.src = 'images/cbd.jpg';
								var div_ = document.createElement('div');
								div_.className = 'mui-media-body';
								div_.innerText = dataAllArray[k].name;
								var p_ = document.createElement('p');
								p_.className = 'mui-ellipsis';
								p_.innerText = '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？';
								div_.appendChild(p_);
								a_.appendChild(img_);
								a_.appendChild(div_);
								li_.appendChild(a_);
								if (cellindex.length != 0) {
									tableview.insertBefore(li_, tableview.firstChild);
								} else {
									tableview.appendChild(li_);
								}
							}
							mui('.mui-table-view').pullRefresh().endPulldownToRefresh();
						} else {
							rescontent = obj.resStr;
							alert("error:" + rescode + "\nmsg:" + rescontent);
						}
					},
					error: function(code, type, msg) {
						alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
					}
				});
			}
			/**
			 * 上滑加载更多
			 */
			function pulluprefresh() {
				indexsub++;
				var urls = <a target=_blank href="http://192.168.1.1:8080/tt/login">http://192.168.1.1:8080/tt/login</a>;
				var jsondata = {
					name: '张三',
					pwd: '123456',
					index: indexsub
				};
				params = JSON.stringify(jsondata);
				console.log('params = ' + params);
				mui.ajax(urls, {
					data: params,
					type: 'POST',
					timeout: 10000,
					success: function(data) {
						plus.nativeUI.closeWaiting();
						var obj = JSON.parse(data);
						rescode = obj.resCode;
						console.log('rescode = ' + rescode);
						if (rescode == 200) {
							var response = obj.resPonse;
							tableview = document.body.querySelector('.mui-table-view');
							if (response.length <= 0) {
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(true); // true 表示 没有更多数据
							} else {
								for (var i = 0; i < response.length; i++) {
									dataAllArray.push(response[i]);
								}
								// 查询当前子元素个数 （class:mui-table-view-cell）
								cellindex = document.body.querySelectorAll('.mui-table-view-cell');
								for (var k = cellindex.length; k < dataAllArray.length; k++) {
									//******************************模版一（简单li）*************************	
									//									li_ = document.createElement('li');
									//									li_.id = k;
									//									li_.className = 'mui-table-view-cell';
									//									li_.innerText = dataAllArray[k].name;
									//******************************模版二（带图片li）*************************
									var li_ = document.createElement('li');
									li_.className = "mui-table-view-cell mui-media";
									li_.id = k;
									var a_ = document.createElement('a');
									a_.href = "#";
									//a_.id = i;
									var img_ = document.createElement('img');
									img_.className = 'mui-media-object mui-pull-left';
									img_.src = 'images/cbd.jpg';
									var div_ = document.createElement('div');
									div_.className = 'mui-media-body';
									div_.innerText = dataAllArray[k].name;
									var p_ = document.createElement('p');
									p_.className = 'mui-ellipsis';
									p_.innerText = '能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？';
									div_.appendChild(p_);
									a_.appendChild(img_);
									a_.appendChild(div_);
									li_.appendChild(a_);
									tableview.appendChild(li_);
								}
								mui('#refreshContainer').pullRefresh().endPullupToRefresh(false); // true 表示 没有更多数据
							}
						} else {
							rescontent = obj.resStr;
							alert("error:" + rescode + "\nmsg:" + rescontent);
						}
					},
					error: function(code, type, msg) {
						alert("error:" + code + "\ntype = " + type + "\nmsg:" + msg);
					}
				});
			}
			// item 点击事件
			mui('.mui-table-view').on('tap', 'li', function() {
				id = this.getAttribute('id');
				obj = dataAllArray[id];
				alert('name = ' + obj.name + "\npwd = " + obj.pwd + "\nage = " + obj.age);
			});
		</script>
	</body>

</html>


服务端（接收mui.ajax的post请求，并做出响应）

@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		String requets = IOUtils.toString(req.getInputStream(), "utf-8");
		System.out.println("requets = " + requets);
		Gson mGson = new Gson();
		UserVo muser = mGson.fromJson(requets, UserVo.class);
		System.out.println("getIndex = " + muser.getIndex());
		int index = Integer.parseInt(muser.getIndex());
		JSONObject mJsonObject = new JSONObject();
		mJsonObject.put("resCode", "200");
		mJsonObject.put("resStr", "请求成功");
		JSONArray mArray = new JSONArray();
		if (index == 1) {
			count = 1;
		}
		if (index > 3) {

		} else {
			for (int i = 0; i < 5; i++) {
				JSONObject mJsonObjects = new JSONObject();
				mJsonObjects.put("name", "张三" + count);
				mJsonObjects.put("pwd", "123456" + count);
				mJsonObjects.put("age", "20" + count);
				mArray.add(mJsonObjects);
				count++;
			}
		}
		mJsonObject.put("resPonse", mArray);
		OutputStream out = resp.getOutputStream();
		out.write(mJsonObject.toString().getBytes("UTF-8"));
		out.close();

	}







效果图













LoadTown
关注
  • 4
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
html搜索框中包含下拉列表,mui带搜索框的下拉列表
weixin_39625709的博客
06-03 885
做了一个带有搜索框的的列表，都是用的mui组件，现在的情况就是点击搜索输入框弹出软键盘后，子页面会整体下移，并且导致所有带有子页面的的页面显示都出现下移情况，这种情况只在安卓设备有，ios就没有。 //父页面路况信息查询mainbody{font-family: "微软雅黑";font-size: 14px;}.mui-bar{background-color: #1E81D2;colo...
mui侧滑导航（左侧）
一只喜欢学习的猪仔
12-09 9990
MUI-最接近原生APP体验的高性能前端框架 mui侧滑导航（左侧）效果图： 导入mui控件需要的css,js文件： <link href="../resources/ui/mui-master/dist/css/mui.css" rel="stylesheet"/> <script type="text/javascript" src="../resources/js/jquery.js
mui下拉刷新的ajax实现
VMLINUZ的专栏
06-24 6136
mui.init({ swipeBack: false, pullRefresh: { container: '#pullrefresh', down: { callback: pulldownRefresh } } }); /** * 下拉刷新具体业务实现 */ var last=-5,amount=5; function pulldown
使用MUI框架，模拟手机端的下拉刷新，上拉加载操作。
weixin_30312659的博客
09-03 106
套用mui官方文档的一句话：“开发者只需关心业务逻辑，实现加载更多数据即可”。真的是不错的框架。 想更多的了解这个框架：http://dev.dcloud.net.cn/mui/ 那么如何实现下拉刷新，上拉加载的功能呢？ 首先需要一个容器： 1 <!--下拉刷新容器--> 2 <div id="refreshContainer" class="mui-co...
MUI框架 · 异步请求：mui.get()、mui.ajax()、mui.post() 技术罗列
草巾冒小子的博客
05-13 6206
MUI自己的一套异步请求的语法：mui.get()、mui.ajax()、mui.post() 技术罗列 官网地址：ajax 官方转载 · 如下： mui框架基于htm5plus的XMLHttpRequest，封装了常用的Ajax函数，支持GET、POST请求方式，支持返回json、xml、html、text、script数据类型； 本着极简的设计原则，mui提供了mui.ajax方法，并...
mui.ajax请求走error
zjingru的博客
05-28 1223
ajax请求走error 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'},
MUi框架ajax请求WebService接口实例
10-18
下面小编就为大家分享一篇MUi框架ajax请求WebService接口实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
mui上拉加载+选项卡+ajax
12-25
因最近开发h5用的前端框架是mui,教程和demo大部分没有动态数据，在网上也没有很好的办法，自己研究弄了一个小demo。
mui 打开新窗口的方式总结及注意事项
12-10
2、head、body分开载入方式：点击、切换窗口显示等待中、执行ajax并渲染页面、将渲染好的页面append到body中。 3、lazyload等方式感觉太贴近网页，就不算在良好用户体验内了。 二、注意事项 1、窗口切换时执行并发...
MUI 下拉刷新和上拉加载的详细介绍
爱我的修罗
11-30 6175
下拉刷新，上拉加载功能在日常APP开发中使用非常频繁，比如消息界面，新闻界面，论坛界面需要你下拉刷新最新的帖子，又或者你有100个帖子，你不可能全部都显示（性能问题），每次显示最新的10条，你先想看稍微早几天的帖子，那就上拉（一次加载N条，一直到找到你需要的），具体的实用就是这些方面，接下来详细介绍用法： 下拉刷新： mui 通过使用原生 webview 下拉刷新解决这个 DIV 动画的卡顿问...
mui.ajax请求后台数据出现error
qq_39086936的博客
08-25 5134
我修改完mui官方的代码为： mui.ajax('http://192.168.0.123:8080/ssm/login',{ data:{ loginName:accountBox.value, loginPassword:passwordBox.value }, dataType:'JSON',//服务器返回json格式数据 type:'POST',//HTTP请求...
mui ajax方法详解
weixin_33798152的博客
03-21 810
mui ajax方法详解： mui提供了mui.ajax，在此基础上有分装出mui.get()/mui.getJSON()/mui.post()三个方法。 mui.ajax( url [,settings] ) mui.ajax( url [,settings] ) url Type: String 请求发送的目标地址 settings Type: PlainObject key/valu...
mui中ajax请求（自己用）
zx19930309的博客
05-14 6930
POST请求 mui.ajax('http://server-name/login.php',{ data:{ username:'username', password:'password' }, dataType:'json',//服务器返回json格式数据 type:'post',//HTTP请求类型 timeout:10000,//超时时间设置为10秒； headers...
mui开发APP教程之mui.ajax请求后出现“加载中”
04-25 2万+
利用mui.ajax向服务器请求数据会出现请求超时的情况，一般若是10S之后还没有响应，就会定义为超时，那么出错了的时候，这10秒钟不可能给用户白屏，即便是请求成功之后打开一个新页面，那么这个间隔时间也给用户响应。 但是mui 的ajax并没有实现类似jquery的ajaxStart 和 ajaxStop方法，然而在移动端上这两个方法还是比较常用的，比如在向后台提交数据的时候显示loading的...
使用mui.ajax访问后台遇到的问题
xiaoyu714543065的专栏
09-29 7112
今天使用mui.ajax({})访问后台，无乱如何都访问不到，还不报错。 通过查找问题，才发现：原来用手机真机访问mui属于跨域访问，不能使用localhost 或者127.0.0.1之类的ip，只能使用实际的IP才能访问。
使用MUI框架构建App请求http接口实例
热门推荐
irokay的专栏
01-18 4万+
最近在看Dcloud的MUI框架，MUI封装了android、ios等多个平台的原生接口，达到开发一个项目，采取不同打包方式，生产多种平台的app。无可厚非，对于从事java web开发的工程师，带来了极大的福音，再也不用去花太多时间去学习原生的android、ios语言，大大缩短了app开发的学习周期和成本。当然，既然是做了封装处理，肯定性能上面不如原生。但是Dcloud官方声称MUI是最接近原生
mui ajax get 数据
云上人间钦自赏
04-14 4415
var date=new Date().getMilliseconds(); var newurl=""; newurl=url+"&username="+user+"&password="+pwd+"&date="+date; //alert(newurl); //请求方式，默认为Get； var type = "get"; //预期服务器范围的数据类型 var dataType = "
mui.ajax工具类
最新发布
09-15
mui.ajax是一个工具类，用于发送Ajax请求。它是基于HTML5的XMLHttpRequest对象进行封装的，并提供了一些常用的方法来简化Ajax请求的操作。具体参数可以参考官方文档，链接如下：[官方链接](ajax)。 引用提到了mui....

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值