使用jQuery——Ajax請求本地json檔案
阿新 • • 發佈：2019-02-12
很多情況下，我們的頁面需要Ajax請求json資料生成內容。使用jQuery的 ajax() 方法請求資料時，語法如下：
$.ajax({name:value, name:value, ... })
示例如下：
本地json內容為：
{
"list":[
{
"manage":[
{"tool":"查詢工具"},
{"tool":"管理工具"}
]
}
]
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ajax請求本地json檔案</title> </head> <body> <div id="test"></div> <script src="jquery-2.2.1.min.js"></script> <script> $(function(){ $.ajax({ //請求方式 type:"GET", //檔案位置 url:"json_data.json", //返回資料格式為json,也可以是其他格式如 dataType: "json", //請求成功後要執行的函式，拼接html success: function(data){ var str="<ul>"; $.each(data.list[0].manage,function(i,n){ str+="<li>"+n.tool+"</li>"; }); str+="</ul>"; $("div").append(str); } }); }); </script> </body> </html>
得出結果：
- 查詢工具
- 管理工具
ajax請求成功，值得一提的是 each() 方法中，的兩個引數，第一個是陣列物件，由於我的json樹內容有兩層，一開始誤用成
data.list.manage導致出錯，這種小失誤值得警惕。第二個引數是call呼叫的函式，在這裡傳入的 i 和 n 分別代表元素在陣列的位置和元素值。遍歷json元素時可以用“.”獲取相應的的值，如此時的 n.tool 。