使用原生ajax处理json组成的数组

和前一篇文章一样,直接上代码了,只是做个记录。

  1. 数据的提供页面,tigong.php
    <?php
    header("content-type:text/html;charset=utf-8");
    echo '[{"name":"黎明","age":"12","sex":"男"},{"name":"小红","age":"12","sex":"女"},{"name":"增益","age":"22","sex":"男"}]';
    ?>

     

  2. 使用eval得方法处理
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            window.onload=function(){
                var div1=document.getElementById("div1");
                var bt1=document.getElementById("bt1");
                bt1.onclick=function(){
                    //创建ajax对象,写兼容
                    if(window.XMLHttpRequest){
                        var xmlHttp=new XMLHttpRequest();
                    }else{
                        var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    };
                    //获取要发送的数据,我们这个例子没有
                    //设置发送数据的地址和方法
                    xmlHttp.open("POST","tigongjson.php");
                    //设置我们的请求头信息
                    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    //绑定onreadystatechange事件
                    xmlHttp.onreadystatechange=function(){
                        if(xmlHttp.readyState==4 && xmlHttp.status==200){
                            var data=xmlHttp.responseText;
                            //json字符串转换成为json对象
                            data=eval("("+data+")");
                            var str="";
                            for(var i=0;i<data.length;i++){
                                str+="姓名"+data[i].name+"<br>";
                                str+="年龄"+data[i].age+"<br>";
                                str+="性别"+data[i].sex+"<br>";
                                };
                                div1.innerHTML=str;
                        };
                    };
                    //发送数据
                    xmlHttp.send();
                };
            };
        </script>
        <style type="text/css">
            #div1{
                width:200px;
                height:200px;
                background:#f00;
                color:#fff;
            }
            img{
                width:200px;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <div id="div1">
            <img src="../php2/images/1.gif">
        </div>
        <br>
        <button id="bt1">点击获取json数据</button>
    </body>
    </html>

     



  3. 使用JSON.parse()方法进行处理
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script type="text/javascript">
            window.onload=function(){
                var div1=document.getElementById("div1");
                var bt1=document.getElementById("bt1");
                bt1.onclick=function(){
                    //创建ajax对象,写兼容
                    if(window.XMLHttpRequest){
                        var xmlHttp=new XMLHttpRequest();
                    }else{
                        var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    };
                    //获取要发送的数据,我们这个例子没有
                    //设置发送数据的地址和方法
                    xmlHttp.open("POST","tigongjson.php");
                    //设置我们的请求头信息
                    xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                    //绑定onreadystatechange事件
                    xmlHttp.onreadystatechange=function(){
                        if(xmlHttp.readyState==4 && xmlHttp.status==200){
                            var data=xmlHttp.responseText;
                            //json字符串转换成为json对象
                            data=JSON.parse(data);
                            var str="";
                            for(var i=0;i<data.length;i++){
                                str+="姓名:"+data[i].name+"<br>";
                                str+="年龄:"+data[i].age+"<br>";
                                str+="性别:"+data[i].sex+"<br>";
                                };
                            div1.innerHTML=str;
                        };
                    };
                    //发送数据
                    xmlHttp.send();
                };
            };
        </script>
        <style type="text/css">
            #div1{
                width:200px;
                height:200px;
                background:#f00;
                color:#fff;
            }
            img{
                width:200px;
            }
        </style>
        <title>Document</title>
    </head>
    <body>
        <div id="div1">
            <img src="../php2/images/1.gif">
        </div>
        <br>
        <button id="bt1">点击获取json数据</button>
    </body>
    </html>

     

posted @ 2016-10-27 09:12  Gabriel_wei  阅读(2723)  评论(0编辑  收藏  举报