ajax技術返回json如何處理

本文轉載自查看原文 2018-10-19 16:43 3205

json只是一種文本字符串。

Smarty是一個使用PHP寫出來的模板引擎。

ajax如何處理json數據格式

①json的格式如下：

"{屬性名:屬性值,屬性名:屬性值}"。

因為json數據是原生態的，因此這種數據格式很穩定，而且描述能力很強，我們建議使用json數據。

<!DOCTYPE html>
<html>
<head>
<title>用戶注冊</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" >
    //創建ajax引擎
    function getXmlHttpObject(){
    
        var xmlHttpRequest;
        //不同瀏覽器獲取xmlHttpRequest對象方法不一樣
        if(window.ActiveXObject){
            //window.alert("ie");
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            //window.alert("no ie");
            xmlHttpRequest=new XMLHttpRequest();
        }
        return xmlHttpRequest;
    }
    
    
    var myXmlHttpRequest="";
    //驗證用戶名是否存在
    function checkName(){
        
        myXmlHttpRequest=getXmlHttpObject();
        //怎么判斷創建ok
        if(myXmlHttpRequest){
            var url="/registerProcess.php";
            //這個是要發送的數據
            var data="username="+$("username").value;
            //打開請求,准備發送,,true表示同步處理
            myXmlHttpRequest.open("post", url, true);
            //還有一句話，這句話必須
            //在編程過程中，建議用Post，post會更好一些
            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //指定回調函數.chuli是函數名
            myXmlHttpRequest.onreadystatechange=chuli;
            
            //真的發送請求，如果是get請求則填入 null即可
            //如果是post請求，則填入實際的數據
            myXmlHttpRequest.send(data);
            //狀態改變的觸發器
            //myXmlHttpRequest.open("get");
        }else{
            //window.alert("創建失敗");
        }
        
    }
    
    //回調函數
    function chuli(){
        //window.alert("處理函數被調回"+myXmlHttpRequest.readyState);
        //我要取出從regiseterPro.php頁面返回的數據
        if(myXmlHttpRequest.readyState==4){
            var mes=myXmlHttpRequest.responseText;
            //window.alert(mes);
            //使用eval函數將mes字串，轉成對應的對象
            var mes_obj=eval("("+mes+")");
            /*window.alert(mes_obj.res);
            window.alert(mes_obj.id);
            window.alert(mes_obj.date);*/
            $("myres").value=mes_obj.res;
        }
    }
    
    function $(id){
        return document.getElementById(id);
    }
    
</script>
</head>
<body>
<form >

用戶名字<input type="text" name="username1" id="username" /><input type="button" value="驗證用戶名" onclick="checkName()"/>
<input type="text" style="border-width:0;color:red" id="myres"/>
<br/>
用戶密碼<input type="password" name="password" id="password"/><br/>
電子郵件<input type="text" name="email" id="email"/><br/>
<input type="submit" value="用戶注冊"/><br/><br/>



用戶名字<input type="text" name="username1" />
<input type="text" style="border-width:0;color:red"/>
<br/>
用戶密碼<input type="password" name="password"/><br/>
電子郵件<input type="text" name="email"/><br/>
<input type="button" value="用戶注冊"/>

</form>
</body>

</html>

registerProcess.php

<?php 
    //這里兩句話很重要，第一句話告訴瀏覽器返回的數據是xml格式
    header("Content-type: text/html; charset=utf-8");
    //如果這里寫成Content-type: text/html，會報錯，得不到數據
    //告訴瀏覽器不要緩存數據
    header("Cache-Control:no-cache");
    //接收數據（這里要和請求方式對應 _POST 還是 _GET
    $username=$_POST['username'];

    $info="";
    if($username=="shunping"){
        $info='{"res":"該用戶不可以用","id":"a001","date":"2011-11-11"}';//注意，這里數據是返回給請求的頁面
    }else if($username!=""){
        $info='{"res":"該用戶可以用","id":"a001","date":"2011-11-11"}';
    }
    echo $info;


?>

JSON(Javascript Object Notation)一種簡單地數據格式，比xml更輕巧。

JSON是JavaScript原生格式，這意味着在javascript中處理JSON數據不需要任何特殊的API或工具包。

JSON數據格式很嚴格。

JSON的規則很簡單：對象是一個無序的“”名稱/值‘對’集合。

var mes=eval("("+'{"res":"該用戶可以用","id":"a001","date":"2011-11-11"}'+")");
    window.alert(mes.res);
    //該代碼可以運行

如同：

var mes_obj=eval("("+mes+")");
window.alert(mes_ob.res);

訪問一組json數據。

var dogs=[{"name":"小明","age":"8"},{"name":"小狗","age":"3"}];
    window.alert(dogs[0].name);
    window.alert(dogs[0].age);

    window.alert(dogs[1].name);
    window.alert(dogs[1].age);

②json數據格式的擴展

如果服務器返回的json是多組數據，則格式應當如下：

$info="[{"屬性名":"屬性值",....},{"屬性名":"屬性值",....},...]";

在xmlhttprequest對象接收到json數據后，應當這樣處理

//轉成對象數組
var reses=eval("("+xmlhttprequest.responseText+")");
//通過reses可以取得你希望的任何一個值

reses[i].屬性值

復雜的json數據讀取

var people={
        "programmers":
        [
            {"firstName":"Brett", "email":"brett@"},
            {"firstName":"Jason", "email":"jason@"}
        ],
        "writer":
        [
            {"writer1":"宋江","age":"50"},
            {"writer2":"吳用","age":"30"}
        ],
        "sex":"男"
};

    window.alert(people.programmers[0].firstName);
    window.alert(people.writer[1].age);
    window.alert(people.sex);

<!DOCTYPE html>
<html>
<head>
<title>用戶注冊</title>
<meta charset="utf-8">
<script language="javascript" type="text/javascript" >
    //創建ajax引擎
    function getXmlHttpObject(){
    
        var xmlHttpRequest;
        //不同瀏覽器獲取xmlHttpRequest對象方法不一樣
        if(window.ActiveXObject){
            //window.alert("ie");
            xmlHttpRequest=new ActiveXObject("Microsoft.XMLHTTP");
        }else{
            //window.alert("no ie");
            xmlHttpRequest=new XMLHttpRequest();
        }
        return xmlHttpRequest;
    }
    
    
    var myXmlHttpRequest="";
    //驗證用戶名是否存在
    function checkName(){
        
        myXmlHttpRequest=getXmlHttpObject();
        //怎么判斷創建ok
        if(myXmlHttpRequest){
            var url="/registerProcess.php";
            //這個是要發送的數據
            var data="username="+$("username").value;
            //打開請求,准備發送,,true表示同步處理
            myXmlHttpRequest.open("post", url, true);
            //還有一句話，這句話必須
            //在編程過程中，建議用Post，post會更好一些
            myXmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //指定回調函數.chuli是函數名
            myXmlHttpRequest.onreadystatechange=chuli;
            
            //真的發送請求，如果是get請求則填入 null即可
            //如果是post請求，則填入實際的數據
            myXmlHttpRequest.send(data);
            //狀態改變的觸發器
            //myXmlHttpRequest.open("get");
        }else{
            //window.alert("創建失敗");
        }
        
    }
    
    //回調函數
    function chuli(){
        //window.alert("處理函數被調回"+myXmlHttpRequest.readyState);
        //我要取出從regiseterPro.php頁面返回的數據
        if(myXmlHttpRequest.readyState==4){
            var mes=myXmlHttpRequest.responseText;
            
            //使用eval函數將mes字串，轉成對應的對象
            var mes_obj=eval("("+mes+")");
            //取出第一組信息的res
            /*window.alert(mes_obj[1].id);
            $("myres").value=mes_obj[0].res;*/
            //window.alert(mes_obj[1].age);
            //如果你希望遍歷返回的json數據
            for(var i=0;mes_obj.length;i++){
                window.alert(mes_obj[i].res);
            }
        }
    }
    
    function $(id){
        return document.getElementById(id);
    }
    
</script>
</head>
<body>
<form >

用戶名字<input type="text" name="username1" id="username" /><input type="button" value="驗證用戶名" onclick="checkName()"/>
<input type="text" style="border-width:0;color:red" id="myres"/>
<br/>
用戶密碼<input type="password" name="password" id="password"/><br/>
電子郵件<input type="text" name="email" id="email"/><br/>
<input type="submit" value="用戶注冊"/><br/><br/>



用戶名字<input type="text" name="username1" />
<input type="text" style="border-width:0;color:red"/>
<br/>
用戶密碼<input type="password" name="password"/><br/>
電子郵件<input type="text" name="email"/><br/>
<input type="button" value="用戶注冊"/>

</form>
</body>

</html>

registerProcess.php

<?php 
    //這里兩句話很重要，第一句話告訴瀏覽器返回的數據是xml格式
    header("Content-type: text/html; charset=utf-8");
    //如果這里寫成Content-type: text/html，會報錯，得不到數據
    //告訴瀏覽器不要緩存數據
    header("Cache-Control:no-cache");
    //接收數據（這里要和請求方式對應 _POST 還是 _GET
    $username=$_POST['username'];

    $info="";
    if($username=="shunping"){
        $info='[{"res":"該用戶不可以用","id":"a001","date":"2011-11-11"},{"age":"該用戶不可以用","id":"a005","date":"2011-11-11"}]';//注意，這里數據是返回給請求的頁面
    }else if($username!=""){
        $info='[{"res":"該用戶可以用","id":"a001","date":"2011-11-11"},{"res":"該用戶可以用","id":"a001","date":"2011-11-11"}]';
    }
    echo $info;


?>

json格式小結

優點：

①作為一種數據傳輸格式，JSON與XML很相似，但是它更加輕巧。

②json不需要從服務器發送含有特定內容類型的首部信息。

缺點：

①語法過於嚴謹

②eval函數存在風險

小結

當一個ajax請求到服務器，服務器可以根據需求返回三種格式的數據，那么我們應當選擇哪一個？

1.如果你的項目經理沒有特殊要求，建議使用json

2.如果數據需要重用，JSON文件是個不錯的選擇，其在性能和文件大小方面有優勢

3.當遠程應用程序未知時，XML文檔是首選，因為XML是web服務領域的世界語。

4.若應用程序不需要與其他應用程序共享數據的時候，使用HTML片段來返回數據是最簡單的。

xml是最通用的一種數據格式。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 JQuery處理json與ajax返回JSON實例 JQuery處理json與ajax返回JSON實例 springmvc處理ajax請求，返回json數據 ajax 請求PHP返回json格式的處理 ajax返回JSON時的處理方式 js處理ajax返回的json數組 ajax返回JSON時的處理方式 ajax請求返回json字符串/json對象處理 ajax 請求對json傳的處理 Jquery 使用Ajax獲取后台返回的Json數據后,頁面處理 Ajax異步請求一般處理程序（List）返回Json數據