ajax请求数据（xml和json格式）的⽅法整理1、xml格式的数据数据模型
<?xml version="1.0" encoding="UTF-8" ?>
<root>
<item>
<strNowEngineer>dypro001</strNowEngineer>
<completeNum>3</completeNum>
<InTreatmentNum>0</InTreatmentNum>
</item>
<item>
<strNowEngineer>dypro002</strNowEngineer>
<completeNum>4</completeNum>
<InTreatmentNum>1</InTreatmentNum>
</item>
<item>
<strNowEngineer>dypro003</strNowEngineer>
<completeNum>5</completeNum>
<InTreatmentNum>2</InTreatmentNum>
</item>
<item>
<strNowEngineer>dypro004</strNowEngineer>
<completeNum>6</completeNum>
<InTreatmentNum>0</InTreatmentNum>
</item>
</root>
⽅法代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
// ajax读取xml格式数据：
$(function(){
// ⽅法⼀
$.ajax({
type:"POST",
url:"l",
dataType:"xml",
success:function(data){
$(data).find("root").find("item").each(function(i,item){
var strNowEngineer=$(item).find("strNowEngineer").text();
var completeNum=$(item).find("completeNum").text();
var InTreatmentNum=$(item).find("InTreatmentNum").text();
$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');
})
},
error:function(){
alert("failed");
}
})
// ⽅法⼆
$.get('l', function(data) {
$(data).find("root").find("item").each(function(i,item){
var strNowEngineer =$(item).find("strNowEngineer").text();
var completeNum=$(item).find("completeNum").text();
var InTreatmentNum=$(item).find("InTreatmentNum").text();
$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');
})
});
// ⽅法三
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
if(widdow.ActiveXObject){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}
else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open("POST","l",true);
adyState==4 && xhr.status==200){
var sponseXML;
$(data).find("root").find("item").each(function(i,item){
var strNowEngineer =$(item).find("strNowEngineer").text();
var completeNum=$(item).find("completeNum").text();
var InTreatmentNum=$(item).find("InTreatmentNum").text();
$("#datatable").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');                })
}
}
xhr.send();
})
</script>
</head>
<body>
<div class="topnavright" id="top_user">
<table id="datatable">
</table>
</div>
</body>
</html>
2、json格式数据数据模型
{"item":[{"strNowEngineer":"dypro001","completeNum":"42","InTreatmentNum":"0"}, {"strNowEngineer":"dypro002","completeNum":"4","InTreatmentNum":"1"}, {"strNowEngineer":"dypro003","completeNum":"5","InTreatmentNum":"2"}, {"strNowEngineer":"dypro004","completeNum":"6","InTreatmentNum":"0"}]}
⽅法代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
$(function(){
// ⽅法⼀：
$.ajax({
type:"POST",
url:"data.json",
dataType:"json",
success:function(data){
var json=eval(data.item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=itempleteNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');
})
alert(result);
},
error:function(data){
alert("failed");
}
})
// ⽅法⼆
$.getJSON('data.json', function(data){
var json=eval(data.item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=itempleteNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');
})
});
// ⽅法三
var xhr;
if(window,XMLHttpRequest){
xhr=new XMLHttpRequest();
if(window.ActiveXObject){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open("GET","data.json",true);
adyState==4 && xhr.status==200){
var sponseText;
var json=eval('('+result+')');
for(var i=0;i<json.item.length;i++){
var strNowEngineer=json.item[i].strNowEngineer;
var completeNum=json.item[i]pleteNum;
var InTreatmentNum=json.item[i].InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');                }
}
}
xhr.send();
})
</script>
</head>
<body>
<div class="content">
<button type="button" id="datashow">1</button>
<table id="data">
</table>
</div>
</body>
</html>
3、json格式数据数据模型
{
"root": {
"item": [
{
"strNowEngineer": "dypro001",
"completeNum": "3",
"InTreatmentNum": "0"
},
{
"strNowEngineer": "dypro002",
"completeNum": "4",
"InTreatmentNum": "1"
},
{
"strNowEngineer": "dypro003",
"completeNum": "5",
"InTreatmentNum": "2"
},
{
"strNowEngineer": "dypro004",
"completeNum": "6",
"InTreatmentNum": "0"
}
]
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax</title>
<script src="js/jquery-2.1.4.min.js" type="text/javascript"></script>
<script>
$(function(){
// ⽅法⼀：
type:"POST",
url:"data.json",
dataType:"json",
success:function(data){
var json=item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=itempleteNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');                })
alert(result);
},
error:function(data){
alert("failed");
}
})
// ⽅法⼆
$.getJSON('data.json', function(data){
var json=item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=itempleteNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');            })
});
// ⽅法三
var xhr;
if(window,XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
if(window.ActiveXObject){
xhr=new ActiveXObject("Msxml2.XMLHTTP");
}else{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
}
xhr.open("GET","data.json",true);
adyState==4 && xhr.status==200){
var sponseText;
var json=eval('('+result+')');
for(var i=0;i&item.length;i++){
发送ajax请求的步骤var item[i].strNowEngineer;
var item[i]pleteNum;
var item[i].InTreatmentNum;
$("#data").append('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>');                }
}
}
xhr.send();
})
</script>
</head>
<body>
<div class="content">
<button type="button" id="datashow">1</button>
<table id="data">
</table>
</div>
</body>
</html>
和上⼀个差别：数据格式多了⼀层节点，。代码中
var json=item);
var item[i].strNowEngineer；做了修改
1.当url指向本地数据⽂件中，google浏览器不⽀持，⽕狐 ie⽀持。
2.eval()使⽤⽅法：当直接解析⼀个json数据格式的字符串时使⽤var json=eval('('+result+')');
当解析由json数据格式具体字符串时使⽤  var json=eval(data.item)；两者是不同的

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。