[英]Displaying JSON Data using jQuery
我試圖在我的HTML UI中顯示我的JSON數據,JSON對象正在返回,但我無法顯示該對象。
這是我的JSON對象結構:
這是我的JS文件:
$(document).ready(function() {
console.log("ready!");
// on form submission ...
$('form').on('submit', function() {
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
valueTwo = $('input[name="hostname"]').val();
valueThree = $('input[name="iteration"]').val();
console.log(valueOne)
console.log(valueTwo)
console.log(valueThree)
$.ajax({
type: "POST",
url: "/",
datatype:'json',
data : { 'first': valueOne,'second': valueTwo,'third': valueThree},
success: function(result) {
$('#result').html(result.sectoutput.summarystats.Avg.Exempt)
},
error: function(error) {
console.log(error)
}
});
});
});
我的結果div中沒有任何結果。
編輯:
這是我的UI上的json.stringify(result)輸出:
我覺得你應該停止提交表格:
$('form').on('submit', function(e) { // <-----add arg to get the event as e.
e.preventDefault(); //<----add this to stop the form submission
console.log("the form has beeen submitted");
// grab values
valueOne = $('input[name="perfid"]').val();
valueTwo = $('input[name="hostname"]').val();
valueThree = $('input[name="iteration"]').val();
console.log(valueOne)
console.log(valueTwo)
console.log(valueThree)
$.ajax({
type: "POST",
url: "/",
datatype: 'json',
data: {
'first': valueOne,
'second': valueTwo,
'third': valueThree
},
success: function(data) { //<----this confused so change it to "data"
var res = data.result.sectoutput.summarystats.Avg.Exempt;
var p = '<p><pre>'+res+'</pre></p>';
$('#result').append(p); // now append the Exempts here.
},
error: function(error) {
console.log(error)
}
});
});
因為如果你沒有那么表單將提交並且頁面被刷新,並且來自ajax的數據將不會被反映。
我想實際問題在於:
success: function(data) { //<----this confused so change it to "data"
var res = data.result.sectoutput.summarystats.Avg.Exempt;
var p = '<p><pre>'+res+'</pre></p>';
$('#result').append(p); // now append the Exempts here.
},
代碼中最令人困惑的部分是result
鍵的使用。 最好在成功回調中使用不同的名稱,因為我使用的data
表示來自作為對象的ajax的響應數據。 所以我們只需要將其定位為:
var res = data.result.sectoutput.summarystats.Avg.Exempt;
您可以使用jQuery.parseJSON() ,此方法將json轉換為javascript對象,然后循環此對象並將html追加到頁面。 使用服務器中的參數發送項目數組而不是對象會更好。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.