Html从php获取json并解析

最新推荐文章于 2024-03-09 17:28:27 发布

andylauren

最新推荐文章于 2024-03-09 17:28:27 发布

阅读量704

点赞数

分类专栏：技术原理文章标签： php json html

本文链接：https://blog.csdn.net/andylauren/article/details/120074597

版权

技术原理专栏收录该内容

18 篇文章 1 订阅

订阅专栏

先上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.'"}
 } 

?>

通过echo返回json数据。

效果：

参考博文：

https://blog.csdn.net/chuanyu/article/details/45920039

https://www.php.cn/php-ask-433923.html

andylauren

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Html从php获取json并解析

先上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.j..
复制链接

扫一扫