1、xml格式的数据 数据模型
方法代码:
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="js/jquery-2.1.4.min.js" type="text/javascript">script>
<script>
// ajax读取xml格式数据:
$(function(){
// 方法一
$.ajax({
type:"POST",
url:"data.xml",
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(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
},
error:function(){
alert("failed");
}
})
// 方法二
$.get('data.xml', 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(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
});
// 方法三
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","data.xml",true);
xhr.onreadystatechange=function(data){
if(xhr.readyState==4 && xhr.status==200){
var data=xhr.responseXML;
$(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(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
}
}
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>ajaxtitle>
<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=item.completeNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
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=item.completeNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
});
// 方法三
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);
xhr.onreadystatechange=function(data){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
var json=eval('('+result+')');
for(var i=0;i<json.item.length;i++){
var strNowEngineer=json.item[i].strNowEngineer;
var completeNum=json.item[i].completeNum;
var InTreatmentNum=json.item[i].InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
}
}
}
xhr.send();
})
script>
head>
<body>
<div class="content">
<button type="button" id="datashow">1button>
<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>ajaxtitle>
<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.root.item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=item.completeNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
alert(result);
},
error:function(data){
alert("failed");
}
})
// 方法二
$.getJSON('data.json', function(data){
var json=eval(data.root.item);
$.each(json,function(i,item){
var strNowEngineer=item.strNowEngineer;
var completeNum=item.completeNum;
var InTreatmentNum=item.InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
})
});
// 方法三
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);
xhr.onreadystatechange=function(data){
if(xhr.readyState==4 && xhr.status==200){
var result=xhr.responseText;
var json=eval('('+result+')');
for(var i=0;i<json.root.item.length;i++){
var strNowEngineer=json.root.item[i].strNowEngineer;
var completeNum=json.root.item[i].completeNum;
var InTreatmentNum=json.root.item[i].InTreatmentNum;
$("#data").append(''+strNowEngineer+' '+completeNum+' '+InTreatmentNum+' ');
}
}
}
xhr.send();
})
script>
head>
<body>
<div class="content">
<button type="button" id="datashow">1button>
<table id="data">
table>
div>
body>
html>
和上一个差别:数据格式 多了一层节点,。代码中
var json=eval(data.root.item);
var strNowEngineer=json.root.item[i].strNowEngineer;做了修改
1.当url指向本地数据文件中,google浏览器不支持,火狐 ie支持。
2.eval()使用方法:当直接解析一个json数据格式的字符串时 使用var json=eval('('+result+')');
当解析由json数据格式具体字符串时使用 var json=eval(data.item);两者是不同的