html獲取簡單json數據-後臺PHP

1.先寫PHP,代碼如下:

<?php
header('Content-type:application/json;charset=utf-8');
 $json='{
        "id": "1",
        "name": "姓名",
        "show": "內容",
        "mp3_path": "目錄"
        }';
echo $json;
?>

注意:設置請求頭爲json數據,字符編碼utf-8,中間是分號。
在PHP中變量前用$符號。
2.在html引入jquery發起ajax請求,代碼如下:

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <title>Javascript</title>
    //引入jquery的CDN
    <script   src="https://code.jquery.com/jquery-3.2.1.js"   integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="   crossorigin="anonymous"></script>
</head>
<body>
<div id="div1">
    <ul></ul>
</div>
<script>
      var html="";
      $.ajax({
        type: "get",
        url: "test01.php",
        success: function (data)
        {
           //for in遍歷php返回的json數據
            for(var k in data)
            {
                 //用模板字符串將key value,拼接到html字符串中。
                   html+=`<li>${k} :${data[k]}</li>`
            }
            $("#div1 ul").html(html);
        },
        error:function () {
            alert("1111");
        }
    });
</script>
</body>
</html>

3.注意:php文件和html文件應該位於同一目錄,否則會存在跨域問題。
4.我是將這兩個文件放在xampp下的htdocs目錄。
5.打開文件可以看到輸出如下。
輸出內容

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章