大家好 我是歌谣 记录工作中遇到的各种问题 微信公众号关注前端小歌谣持续学习前端知识
样式部分
<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')
运行结果
