jQuery是一款優秀的JavaScript庫,在前端開發中經常用來操作DOM元素和處理AJAX請求。其中通過AJAX請求來獲取本地JSON文件的方式,也是常用的方法之一。
$(document).ready(function(){ $.getJSON('example.json', function(data){ $.each(data, function(index, item){ $('#content').append('<p>' + item.title + '</p>'); $('#content').append('<p>' + item.author + '</p>'); }); }); });
首先,我們需要在頁面加載完成后進行操作,這里使用了jQuery提供的ready方法。然后通過調用jQuery中的getJSON方法,在參數中傳入JSON文件的相對路徑,并且將所獲取的數據存儲在data變量中。使用jQuery的each方法,遍歷這些數據并將對應的title和author信息添加到id為content的DOM元素中。
JSON文件的格式通常為鍵值對,如下所示:
[ { "title": "JavaScript高級程序設計", "author": "Nicholas C. Zakas" }, { "title": "JavaScript權威指南", "author": "David Flanagan" } ]
在上面的例子中,我們將獲取的JSON數據按照作者和書名進行展示,展示方式無非就是在HTML中添加對應的元素,這樣就可以通過jQuery動態地將數據顯示在我們的網頁上了。