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

来源：互联网发布：js ajax进行post请求编辑：程序博客网时间：2024/05/17 22:47

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>ajax  eg</title></head><body>  请输入订单号：<input type="text" id="sid" placeholder="XY0120090001" onkeyup="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