ajax请求数据(xml和json格式)的方法 整理

1、xml格式的数据  数据模型




dypro001
3
0


dypro002
4
1


dypro003
5
2


dypro004
6
0


 

方法代码:

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);两者是不同的

转载于:https://www.cnblogs.com/fcx09/p/5305084.html

你可能感兴趣的:(ajax请求数据(xml和json格式)的方法 整理)