1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>登录案例 联动后端服务器</title>
    6.     <script type="text/javascript" src="js/jquery.js"></script>
    7.     <script type="text/javascript">
    8.         $(document).ready(function(){
    9.             $("#btn").on("click",function(){
    10.                 var username = $("#username").val();
    11.                 var password = $("#password").val();
    12.                 $.ajax({
    13.                     url:"http://localhost:8080/ajax",
    14.                     data:{
    15.                         username:username,
    16.                         password:password
    17.                     },
    18.                     type:"post",
    19.                     dataType:"json",
    20.                     async:true,//false使用同步，true表示异步
    21.                     success:function(req){
    22.                         if (req.success==1) {
    23.                             console.log(req.user);
    24.                             alert('登陆成功！');
    25.                             $(location).attr('href','index.html');
    26.                         } else {
    27.                             alert('登录失败！');
    28.                             $(location).attr('href','user.html');
    29.                         }
    31.                     },
    32.                     error:function(xmlHttp,errorText){
    33.                         console.log(xmlHttp);
    34.                         console.log(errorText);
    35.                         alert("请求异常，请联系管理员解决！");
    36.                         $(location).attr('href','user.html');
    37.                     }
    38.                 })
    39.             });
    40.         });
    41.     </script>
    42. </head>
    43. <body>
    44.     <label>姓名：</label>
    45.     <input type="text" id="username" name="username">
    46.     <br>
    47.     <label>密码：</label>
    48.     <input type="password" id="password" name="password">
    49.     <br>
    50.     <input type="button" id="btn" name="btn" value="登录">
    51. </body>
    52. </html>