20201211千锤百炼软工人

ajax的实践

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>登陆界面</title>
   <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
   <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
    <div align="center">
        <h2 style="color: black;">用户登陆</h2>
    <table border="1">
           <tr>
               <td>用户选择</td>
                <td>管理员<input type="radio" id="jiese" name="jiese" value="1" checked="checked">
                                   用户<input type="radio" id="jiese" name="jiese" value="2" >
                </td>
            </tr>
            <tr>
                <td>登陆账号</td>
                <td> <input type="text" id="username"   maxlength="12" required placeholder="请输入账号"/></td>
            </tr>
            <tr>
                <td>登陆密码</td>
                <td> <input type="password" id="password" required placeholder="请输入密码"/></td>
            </tr>
            <tr><td>验证码</td>
            <td>

                <input type="text" value="" placeholder="请输入验证码（区分大小写）" onblur="sublim()"
                style="height:20px;position: relative; font-size:16px;"id ="text">
                <canvas id="canvas" width="110" height="30" onclick="dj()"
                 style="border: 1px solid #ccc;
               border-radius: 5px;"></canvas>
           </td>
           </tr>
           <tr>
               <td></td>
               <td><button type="button" id="login" >登录</button>
                   <button type="button" id="register"value="注册">注册</button></td>
            </tr>
    </table>
    </div>
    <script>
       $(function(){
           $("#login").click(function(){
           var id=$("#username").val();
           var password=$("#password").val();
           $.ajax({
               url:"login",
               type:"POST",
               data:{"username":id,
                      "password":password},
               dataType:"JSON",
               async: true,
               cache: false,
               success:function(data){
                   if(data==null){
                       alert("用户名不存在!请先注册");
                       $("#username").focus();
                        $("#password").val("");
                   }else if(data.password!=password){
                       alert("密码错误！");
                        $("#password").val("");
                        $("#password").focus();
                   }else{
                       localStorage.setItem("id",id);
                       alert("登陆成功！");
                       location.href = "index.jsp?id="+id;
                   }
               },
               error:function(e){
                   alert("出现错误！");
               }
           });
       });
       $("#register").click(function(){
           location.href="register.jsp";
           });
       })
    </script>