Html从php获取json并解析

我会带着你远行 2022-09-10 01:17 322阅读 0赞

![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.'"}
     } 
    
    ?>

通过echo返回json数据。

效果：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_15_color_FFFFFF_t_70_g_se_x_16][]

![20210903093633109.png][]

参考博文：

[https://blog.csdn.net/chuanyu/article/details/45920039][https_blog.csdn.net_chuanyu_article_details_45920039]

[https://www.php.cn/php-ask-433923.html][https_www.php.cn_php-ask-433923.html]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_16_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/ad2c87d32a4040db94fcba7eee735d1e.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBAYW5keWxhdXJlbg_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/795ec9a5c6b34899947efcc9fdcb1d4e.png
[20210903093633109.png]: /images/20220829/c1d88fa23986460c99aabd5536428b28.png
[https_blog.csdn.net_chuanyu_article_details_45920039]: https://blog.csdn.net/chuanyu/article/details/45920039
[https_www.php.cn_php-ask-433923.html]: https://www.php.cn/php-ask-433923.html