原生ajax发生json数据完整案例

最新推荐文章于 2022-04-16 01:24:21 发布

well2049

最新推荐文章于 2022-04-16 01:24:21 发布

阅读量573

点赞数

本文链接：https://blog.csdn.net/well2049/article/details/72725573

版权

因为原生的，所以有很多需要注意的地方：

<!doctype html>
<html lang="">
<head>
    <meta charset="UTF-8">
    <title>登陆页面</title>
</head>
<body>
<div id="content">
    <div class="login" action="" method="">
        <div class="logo">
            <img src="img/logo.gif" alt=""/>
        </div>
        <div class="name">
            <label for="">账号：</label>
            <input type="text" placeholder="请输入账号" id="names" /><br>

        </div>
        <div class="pwd">
            <label for="">密码：</label>
            <input type="password" placeholder="请输入密码" id="pwds" />
        </div>
        <div id="error"></div>
        <div class="submit">
            <button οnclick="loadXMLDoc();" >登录</button>
        </div>
    </div>
    <script type="text/javascript" src="js/getValue.js"></script>
    <script type="text/javascript">
      function loadXMLDoc(){
        
         function   createXmlHttpRequest(){
         var xmlHttp;
         try{    //Firefox, Opera 8.0+, Safari
                 xmlHttp=new XMLHttpRequest();
          }catch (e){
                 try{    //Internet Explorer
                        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
                  }catch (e){
                        try{
                                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                        }catch (e){}  
                 }
          }
          return xmlHttp;//return object
          
       }
       var  send_data = {
           "Name":  GetValue("names"),
            "Pwd":  GetValue("pwds")  
        }             
       var data =JSON.stringify(send_data); //把send-data   json对象转换成json字符串               
        console.log(data);    
          xmlHttpReq = createXmlHttpRequest();  
          xmlHttpReq.onreadystatechange=function(){  
              if(xmlHttpReq.readyState==4){  
                  if(xmlHttpReq.status==200){  
                     var response_data = xmlHttpReq.responseText;  
                     console.log(response_data);
                     var obj  = JSON.parse(response_data);//这里需要对返回的数据进行解析
                     
                     if (obj.Status == true) {

                      window.location.href="index.html";
                     }else{
                      GetId("error").innerHTML = obj.Msg;
                     }
                  }  
              }  
          }  
          xmlHttpReq.open("post","http://192.168.1.188:80/CommPlugin/Login/Login",true);
          xmlHttpReq.setRequestHeader("Content-Type", "application/json");
          xmlHttpReq.send(data);
        }




      
    </script>
</div>
</body>
</html>

其中一个注意的地方就是千万要写好成json格式，

 xmlHttpReq.setRequestHeader("Content-Type", "application/json");

xmlHTTPReq.send（data）时，需要把json对象 send_data 进行编译成json字符串通过

  var data =JSON.stringify(send_data);

well2049

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫