使用原生ajax處理json組成的數組

本文轉載自查看原文 2016-10-27 09:12 2284 前端開發/ eval/ 數據交互/ JSON.parse/ ajax

和前一篇文章一樣，直接上代碼了，只是做個記錄。

數據的提供頁面，tigong.php

<?php
header("content-type:text/html;charset=utf-8");
echo '[{"name":"黎明","age":"12","sex":"男"},{"name":"小紅","age":"12","sex":"女"},{"name":"增益","age":"22","sex":"男"}]';
?>

使用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>

使用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>

免責聲明！

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

猜您在找 使用原生ajax處理json字符串 js處理ajax返回的json數組原生js 以ajax（post）的方式傳json至php，並讓php解析為數組 MVC中使用ajax傳遞json數組使用原生JS的AJAX讀取json全過程 ajax使用json數組------前端往后台發送json數組及后台往前端發送json數組原生ajax請求json數據原生Ajax使用 Servlet處理原生Ajax請求原生js使用ajax