Html从php获取json并解析-蒲公英云

Html从php获取json并解析

watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_16_color_FFFFFF_t_70_g_se_x_16

先上html代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0-rc1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
    <div id="placeholder"></div>
    <script type="text/javascript">
    var jsonStr = "{\"total\":100,\"data\":[{\"id\":10001,\"name\":\"scott\"},{\"id\":10002,\"name\":\"tiger\"}]}";
    $(document).ready(function(){
        $.ajax({
            url:"http://localhost/default_search.php",
            type: "GET",
            dataType: "text",
            success: function(json){
                alert(json);//$a的值
                var jsonObj = window.JSON.parse(json);
                var str = "json字符串解析为json对象<br>";
                str += "<span>Total:"+jsonObj.total+"</span><br><span>Data:";
                for (var i=0;i<jsonObj.data.length ; i++)
                {
                    str += "id:" + jsonObj.data[i].id + ",name:" + jsonObj.data[i].name+"<br>";
                }
                str += "</span><br>";
                document.querySelector("#placeholder").innerHTML = str;
            }
        })
    })
    </script>
</body>
</html>

其中使用get方法调用php网页

$(document).ready(function(){
        $.ajax({
            url:"http://localhost/default_search.php",
            type: "GET",
            dataType: "text",
            success: function(json){
                alert(json);//$a的值
            }
        })
    })

解析json

var jsonObj = window.JSON.parse(json);

解析的数据显示在网页

str += "<span>Total:"+jsonObj.total+"</span><br><span>Data:";
for (var i=0;i<jsonObj.data.length ; i++)
{
str += "id:" + jsonObj.data[i].id + ",name:" + jsonObj.data[i].name+"<br>";
}
str += "</span><br>";
document.querySelector("#placeholder").innerHTML = str;

php文件default_search.php

<?php
header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:POST,GET');
header('Access-Control-Allow-Credentials:true'); 
header("Content-Type: application/json;charset=utf-8"); 
error_reporting(E_ERROR); 
ini_set("display_errors","Off");  //屏蔽掉PHP警告和错误提示
if ($_SERVER["REQUEST_METHOD"] == "GET") {
    getMethod();
} elseif ($_SERVER["REQUEST_METHOD"] == "POST"){
    postMethod();
}
function getMethod(){    
    $result = "{\"total\":100,\"data\":[{\"id\":10001,\"name\":\"scott\"},{\"id\":10002,\"name\":\"tiger\"}]}";
    if($_GET["data"]){
        $result = '{"success":true,"defaultSearch":"'.$defaultSearch.'"}';
    }
    echo $result;//echo返回json格式化数据对{"success":true,"defaultSearch":"'.$defaultSearch.'"}
 } 
?>