刚学习数据交互,看了好多案例,自己也终结一下,最简单的原生的方式。这个是看了那么多网上的资料,提权出来的,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"}}
下图就是效果图,订单号是就是后天返回的。