AJAX中POST请求和服务器完整代码

前端代码:

  1. <html>  
  2. <head>  
  3. <meta charset="utf-8">  
  4. <title>登录title>  
  5. <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">script>  
  6. <script>  
  7. $(function(){    
  8.     $('#btn').click(function(e){  
  9.         e.preventDefault();   
  10.         $.ajax({  
  11.              cache: true,  
  12.                 type: "POST",                       //采用POST请求  
  13.                 url:"http://110.64.72.18:8888/test",//服务器URL  
  14.                 data:$('#user_form').serialize(),                 
  15.                 async: true,  
  16.                 error: function(res) {      //连接失败的情况  
  17.                       //console.log(res)             
  18.                 alert("Connection error");  
  19.                 },  
  20.                 success: function(res) {    //连接成功的情况服务器返回res  
  21.                         console.log(res)   
  22.                            if(res === "success"){  
  23.                             alert("登录成功"); }      //对服务器返回值res判断,如果res是success则弹出登录成功  
  24.                else{  
  25.                alert("登录失败");         //判断错误打印失败  
  26.                         }  
  27.                 }  
  28.                 });  
  29.                    });  
  30.         });  
  31. script>  
  32. <link rel="stylesheet" type="text/css" href="style.css" charset="utf-8">link>  
  33. head>  
  34. <body style="background-image:url(/images/薰_01.png);background-position:center;background-repeat:no-repeat">      
  35. <div style="background:#FFFAFA;background-color:rgba(255,255,255,0.6);border:1px solid #000;position:absolute;width:400px;height:300px;top:50%;left:50%;margin-left:-200px;margin-top:-150px;text-align:center">  
  36. <h1 style="padding-top:10px;text-shadow:5px 5px 5px darkgrey">登录界面h1>   
  37.   
  38. <form autocomplete="on" id="user_form">  
  39. <div>  
  40. <p style="padding-top:10px">登录: <input type="text" name="xxx" id="xxx" />p>  
  41. <p style="padding-top:10px">密码: <input type="text" name="pw" id="pw" p>  
  42. div>  
  43. form>  
  44. <p style="padding-top:10px;font-size:10px;font-weight:bold;text-shadow:5px 5px 5px grey"> * 登录账号为工号;默认登录密码为123456!p>  
  45. <input style="background:royalblue;width:100px;height:40px;margin-top:10px;  
  46. text-decoration:none;color:white;font-size:20px;font-weight:bold"  
  47.  id="btn" type="submit" value="登录"/>  
  48. div>  
  49. body>  
  50. html>  
服务器代码:

  1. app.post('/test', function (req, res) {  
  2.   
  3.     // res.body.  
  4.     console.log('post')  
  5.     console.log(req.body)  
  6.     console.log(req.body.xxx)  
  7.     if(req.body.xxx === '123456')  
  8.     {     
  9.         res.send('success')   
  10.     }  
  11.     else  
  12.     {  
  13.         res.send('error')  
  14.     }  
  15. })  

你可能感兴趣的:(交互,前后台通信)