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.打開文件可以看到輸出如下。