前端项目实战捌-pad端mui使用网络请求

大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识  

 

样式部分

<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">登录</h1>
		</header>
		<div class="mui-content">
			<form id='login-form' class="mui-input-group">
				<div class="mui-input-row">
					<label>账号</label>
					<input id='account' type="text" class="mui-input-clear mui-input" placeholder="请输入账号">
				</div>
				<div class="mui-input-row">
					<label>密码</label>
					<input id='password' type="password" class="mui-input-clear mui-input" placeholder="请输入密码">
				</div>
			</form>
		
			<div class="mui-content-padded">
				<button  id='login' class="mui-btn mui-btn-block mui-btn-primary">登录</button>
			<!-- 	<div class="link-area"><a id='reg'>注册账号</a> <span class="spliter">|</span> <a id='forgetPassword'>忘记密码</a>
				</div> -->
			</div>
			
		</div>

 js部分

var login=document.getElementById("login");
			var account=document.getElementById("account")
			var password=document.getElementById("password")
			var test=document.getElementById("test")
			//监听点击事件
			login.addEventListener("tap",function () {
				mui.ajax('http://xxxxxx/pda/login',{
					data:{
						account:document.getElementById("account").value,
						password:document.getElementById("password").value
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					headers:{'Content-Type':'application/json'},	              
					success:function(response){
						// test.innerHTML=JSON.stringify(response)
						if(response.code==200){
							window.location.href="./home.html"
							mui.toast('登陆成功',{ duration:'long', type:'div' })
						}else{
							mui.toast('登陆失败',{ duration:'long', type:'div' })
						}
						//服务器返回响应，根据响应结果，分析是否登录成功；
					},
					error:function(xhr,type,errorThrown){
						// test.innerHTML=JSON.stringify(xhr)
						//异常处理；
						console.log(type);
					}
				});
				
			
			});
			//触发submit按钮的点击事件
			mui.trigger(login,'tap')

 运行结果