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:"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('<tr><td>'+strNowEngineer+'</td><td>'+completeNum+'</td><td>'+InTreatmentNum+'</td></tr>'); }) }, 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('<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","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('<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=item.completeNum; 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=item.completeNum; 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); 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('<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(){ // 方法一： $.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('<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.root.item); $.each(json,function(i,item){ var strNowEngineer=item.strNowEngineer; var completeNum=item.completeNum; 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); 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('<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=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);两者是不同的
