JSON文件加載使用jQuery

這是我的jQuery代碼JSON文件加載使用jQuery

$("document").ready(function() { 
     $.getJSON("http://bluewingholidays.com/results.json", function(data) { 
      $("#div-my-table").text("<table>"); 
      $.each(data, function(i, item) { 
       $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>"); 
      }); 
      $("#div-my-table").append("</table>"); 
     }); 
    });

我想用HTML表格

<table id="div-my-table"> 
    <tr><td></td></tr> 
    <tr><td></td></tr> 
    <tr><td></td></tr> 
</table>

，但什麼也沒發生，顯示數據到網絡？

來源

2012-12-10 sami

上有什麼'data' ？ – silasjmatson

我是json.can的新手，你能幫我理解嗎？ – sami

此代碼是否在'bluewingholidays.com'上運行？ –

我讓你的表已經存在的假設，所以這應該工作：

<table id="div-my-table"> </table>

，並在你的腳本程序返回的JSON：

$.each(data.Properties, function(i, item) { 
    $("#div-my-table").append("<tr><td>" + item.id + ":" + item.title + "</td><td>" + item.price + "</td></tr>"); 
});

來源

2012-12-10 20:12:50

最後你是勝利者。感謝上帝 – sami

一個問題，我馬上看到蝙蝠是你需要改變$("document")爲$(document)。您想要傳遞文檔對象而不是選擇器。

$(document).ready(function(){...

來源

2012-12-10 19:13:02

http://jsfiddle.net/tutspack/p9ptJ/1/不能在這裏工作 – sami

@sami：你不能只使用jQuery加載任意的URL。這是違反[同源的政策]（http://en.wikipedia.org/wiki/Same_origin_policy）。 –

薩米人，控制檯揭示了爲什麼'XMLHttpRequest無法加載http://bluewingholidays.com/results.json。來源http://fiddle.jshell.net不允許通過Access-Control-Allow-Origin.' –

append不追加的任意文本（尤其是不</table>）jQuery中！它附加一個元素...你應該使用這樣的代碼：

// Content will contain the HTML code of your new table 
var content = ""; 

$.each(data, function(i, item) { 
    content += "<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>"; 
}); 

// Set the HTML of your table to this new content 
$("#div-my-table").html(content);

來源

2012-12-10 19:21:43

我同意一個有效的HTML片段，但不適用於某些部分代碼。你可以嘗試：http://jsfiddle.net/qmkrY/1/（在Firefox上，更新表的源代碼不包含第一個''）。 –

我意識到什麼是真的要和卸下我的評論：P –

唷:)我已經在我的答案解釋多一點... –

這裏有一堆不同的問題。

首先，$("document").ready(應該是$(document).ready(。失去報價。您想要傳遞document對象，而不是選擇器。

其次，如果此代碼未在bluewingholidays.com上運行，則此代碼將不起作用。這就是所謂的same origin policy。

第三，這不是你如何在jQuery中追加元素。（注：.text是改變元素的文字，如果你發送HTML，它會被轉義）

當你在jQuery的追加HTML，你先不要追加開放的標籤，然後關閉標籤。 jQuery希望你發送完整的HTML，而不是片段。

$(document).ready(function() { 
    // This will only work if this code is on bluewingholidays.com 
    $.getJSON("http://bluewingholidays.com/results.json", function(data) { 
     $("#div-my-table").empty(); // this is already a table, so let's empty it 
     $.each(data, function(i, item) { 
      // You're appending HTML elements to other HTML elements 
      // You are not appending text in the way you think 
      $("#div-my-table").append("<tr><td>" + item.EncoderName + "</td><td>" + item.EncoderStatus + "</td></tr>"); 
     }); 
     // You append HTML elements, not strings, so you don't need this line 
     //$("#div-my-table").append("</table>"); 
    }); 
});

來源

2012-12-10 19:31:34

萬物錯+1很好的總結。 –

是的，很好的總結！但要小心：1.這是'.html（「

」）'（在第二個「表」之前有一個'/'），2.'div-my-table'似乎已經是OP中的一個表代碼，所以不需要創建一個新表，3.我認爲如果附加了很多元素，這段代碼將會很昂貴...... –

@SamuelCaillerie：缺少'/'只是一個錯字。啊，你說的OP的HTML是正確的。讓我解決這個問題。 –

JSON文件加載使用jQuery

回答

相關問題