ajax請求數據（xml和json格式）的方法整理

時間 2020-06-15

標籤 ajax 請求數據 xml json 格式方法整理欄目 Ajax 简体版

原文原文鏈接

一、xml格式的數據數據模型javascript

<?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>
html

方法代碼：java

<!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>

二、json格式數據數據模型jquery

{"item":[{"strNowEngineer":"dypro001","completeNum":"42","InTreatmentNum":"0"},ajax

{"strNowEngineer":"dypro002","completeNum":"4","InTreatmentNum":"1"},json

{"strNowEngineer":"dypro003","completeNum":"5","InTreatmentNum":"2"},瀏覽器

{"strNowEngineer":"dypro004","completeNum":"6","InTreatmentNum":"0"}]}app

方法代碼：google

<!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>

三、json格式數據數據模型url

{
"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);二者是不一樣的

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

ajax請求數據（xml和json格式）的方法 整理

ajax請求數據（xml和json格式）的方法整理