ajax技术返回json如何处理

json只是一种文本字符串。

Smarty是一个使用PHP写出来的模板引擎。

ajax如何处理json数据格式

①json的格式如下：

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

因为json数据是原生态的，因此这种数据格式很稳定，而且描述能力很强，我们建议使用json数据。

register.php

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

register.php

<!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-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-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是最通用的一种数据格式。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/liaoxiaolao/p/9817322.html