從 json 文件中檢索數據
[英]Retrieving data from json File
問題描述
我有一個名為person.json的 JSON 文件。 JSON 文件位於數據文件夾中。
這是 JSON 數據：
{
"name": "Goa Wei",
"age": 31,
"phone": "202-555-0104",
"group": 3
}
單擊<input id="get" type="submit" value="Get"></input>時，我有 html 代碼在名為containerDatadump的 div 類中顯示信息。 我編寫了以下 Javascript 代碼。
var container = $("div.containerDatadump");
$(document).ready(function () {
$("input#get").click(function () {
$.ajax({
type: "GET",
url: "data/person.json",
dataType: "json",
success: function (data) {
$.each(data, function (index, item) {
$.each(item, function (key, value) {
container.append(key + " :" + value + "</br>");
});
container.append("<br/></br>");
});
}
});
});
});
我已經這樣做了。 我盡力調試問題但未能成功。
誰能幫我弄清楚我的代碼有什么問題？ 這真的對我有幫助。
2 個解決方案
解決方案1
1 2018-12-05 08:14:24
我的回答看起來像放棄，但我認為你可以通過使用$.getJSON而不是常規的 ajax 調用來改進你的代碼。
$.getJSON是一個簡寫的 ajax 調用（更多信息）：
$.ajax({
dataType: "json",
url: url,
data: data,
success: success
});
我還為數據 (LINK ) 使用了 JSON Generator 來防止瀏覽器問題。
這樣你的代碼就更清晰了（在我看來）。
$(document).ready(function () { var container = $(".containerDatadump"); $("#get").click(function () { $.getJSON("https://www.json-generator.com/api/json/get/ceoSrTPote?indent=2", function(data){ $.each( data, function( key, val ) { container.append(key + ":" + val + "</br>"); }); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="containerDatadump"></div> <input id="get" type="submit" value="Get"></input>
解決方案2
0 2018-12-05 08:00:11
我認為最大的問題是您在$(document).ready函數之外定義了容器。 這意味着您的標記尚不存在，無法正確處理您的containerDatadump類。
我使用這個JSON 生成器工具制作了一個托管在遠程服務器上的臨時 JSON 文件來進行測試。 否則，我會在瀏覽器中遇到 CORS 問題。
{
"phone": "202-555-0104",
"age": 31,
"group": 3,
"name": "Goa Wei"
}
有了這些數據，我修改了您的函數以簡化您的 ajax 成功處理程序中的循環，並且我將container變量賦值放在ready函數中，以便它正常工作：
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { var container = $("div.containerDatadump"); $("input#get").click(function() { $.ajax({ type: "GET", url: "http://www.json-generator.com/api/json/get/bOxnwzyhIO?indent=2", dataType: "json", success: function(data) { for (var key in data) { if (data.hasOwnProperty(key)) { console.log(key + " -> " + data[key]); container.append("<div>" + key + ":" + data[key] + "</div><br/>"); } } } }); }); }); </script> </head> <body> <input id="get" type="submit" value="Get"></input> <div class="containerDatadump" /> </body> </html>
從php文件中使用.getJSON檢索JSON數據
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.