ajax请求数据和处理数据的案例展示

刚学习数据交互,看了好多案例,自己也终结一下,最简单的原生的方式。这个是看了那么多网上的资料,提权出来的,ajax请求模板:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>ajax  eg</title>
</head>
<body>
  请输入订单号:<input type="text" id="sid" placeholder="XY0120090001" οnkeyup="myFunction()" ><br>
  回来的数据是:<br>
  订单号:<span id="soft"></span><br>
  时间点:<span id="time"></span><br>
  车牌号:<span id="carname"></span>


<script type="text/javascript" src="getValue.js"></script>
<script type="text/javascript">
 function myFunction() {


  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
    
 }
 //要传递给服务器的数据,如果数据比较多采用new FormData()方法。如果比较少直接写到send里面
 // xmlHttpReq.send("idname="+"name","age="+"16");
 /*   var send_data = new FormData();
        form.append("idname","value");
        form.append("idname","value");*/

        var send_data =  document.getElementById("sid").value;
    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);//这里需要对返回的数据进行解析
               console.log(obj.Tag.Id);
                document.getElementById("soft").innerHTML = obj.Tag.Id;
            }  
        }  
    }  
    xmlHttpReq.open("post","/QueryPlugin/PC/QueryPCFirst",true);
    xmlHttpReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xmlHttpReq.send("Id="+send_data);
  }
</script>
</body>
</html>


因为,我这里返回的是json数组集合,所以,需要进行解析一下,也就是json.parse(response_data);

取值时,直接:obj.Tag.Id     

我的返回的数据是:

{"Status":true,"Msg":null,"Tag":{"Id":"XY0120090001","TZId":"TZ02000003","PCDate":"2017-01-01 00:00:00","CarsName":"京J1","MatName":"水泥","Sum":"40"}}


下图就是效果图,订单号是就是后天返回的。



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值