前端项目实战玖-pad端mui使用网络请求利用原生开发-阿里云开发者社区

前端项目实战玖-pad端mui使用网络请求利用原生开发

2023-08-16 78

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 前端项目实战玖-pad端mui使用网络请求利用原生开发

<!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>

前端项目实战玖-pad端mui使用网络请求利用原生开发

热门文章

最新文章

相关课程

相关电子书

相关实验场景