<!DOCTYPE html> <html class="ui-page-login"> <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> <link href="css/mui.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> <style> .area { margin: 20px auto 0px auto; } .mui-input-group { margin-top: 10px; } .mui-input-group:first-child { margin-top: 20px; } .mui-input-group label { width: 22%; } .mui-input-row label~input, .mui-input-row label~select, .mui-input-row label~textarea { width: 78%; } .mui-checkbox input[type=checkbox], .mui-radio input[type=radio] { top: 6px; } .mui-content-padded { margin-top: 25px; } .mui-btn { padding: 10px; } .link-area { display: block; margin-top: 25px; text-align: center; } .spliter { color: #bbb; padding: 0px 8px; } .oauth-area { position: absolute; bottom: 20px; left: 0px; text-align: center; width: 100%; padding: 0px; margin: 0px; } .oauth-area .oauth-btn { display: inline-block; width: 50px; height: 50px; background-size: 30px 30px; background-position: center center; background-repeat: no-repeat; margin: 0px 20px; /*-webkit-filter: grayscale(100%); */ border: solid 1px #ddd; border-radius: 25px; } .oauth-area .oauth-btn:active { border: solid 1px #aaa; } .oauth-area .oauth-btn.disabled { background-color: #ddd; } </style> </head> <body> <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> <script src="js/mui.min.js"></script> <script src="js/mui.enterfocus.js"></script> <script src="js/app.js"></script> <script> 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') </script> </body> </html>