在javascript頁面上顯示JSON數據

我終於成功地通過AJAX傳遞數據並以JSON格式返回數據。但是，現在我不知道如何在我的頁面上顯示它。在javascript頁面上顯示JSON數據

這裏是我的JS：

我的模型運行

$(function() { 
    $("#selectable").selectable({ 
     selected: updatefilters, 
     unselected: updatefilters 
    }); 
    function updatefilters(ev, ui){ 
     // get the selected filters 
     var $selected = $('#selectable').children('.ui-selected'); 
     // create a string that has each filter separated by a pipe ("|") 
     var filters = $selected.map(function(){return this.id;}).get().join("\|"); 
     $.ajax({ 
      type: "POST", 
      url: 'updatefilters', 
      dataType: 'json', 
      data: { filters: filters }, 
      success: function(data){ 
       $('#board').replaceWith(data.content); 
      } 
     }); 
    } 
});

之後，回聲在螢火蟲發現了以下內容：

[{"thread_id":"226","owner_id":"1","subject":"trying to create a HUGE body for thread testi","body":"Firstly, I think 45 characters is perfect for the heading. \n\nHowever, once the body gets huge, I assume that the \"preview\" is going to get a bit out of hand if not truncated. I have truncated code in place...but it doesn't seem to be working.\n\nI'll have to keep testing to ensure we can get it shrunk down to a few hundred characters so as to not completely screw up the page format\n\nyadda yadda yadda...yadda yadda yadda...and more yadda yadda yadda...\n\nBabble Babble Babble Babble Babble \n\nBabble Babble Babble ","timestamp":"2012-05-02 15:29:19","replystamp":"2012-05-02 15:29:53","last_post_id":"1","slug":"226-trying-to-create-a-huge-body-for-thread-testi","replies_num":"1","views":"19"},{"thread_id":"219","owner_id":"3","subject":"testing icons","body":"hellow world","timestamp":"2012-05-01 11:37:08","replystamp":"2012-05-01 11:37:08","last_post_id":"3","slug":"219-testing-icons","replies_num":"0","views":"3"},{"thread_id":"212","owner_id":"1","subject":"This thread is based off entertainm","body":"Yay","timestamp":"2012-04-25 14:07:55","replystamp":"2012-04-25 14:07:55","last_post_id":"1","slug":"212-this-thread-is-based-off-entertainment","replies_num":"0","views":"4"}]

如何與數據替換格「板」的任何意見從返回的JSON數組將是非常有幫助的！

來源

2012-05-07 Ricky Mason

訪問值比方說，你要與主題和內容，以顯示在表中的數據。你可以這樣寫：

success: function(data){ 
    var html = "<table>"; 
    for (i=0 ; i< data.length ; i++) 
    { 
     html += "<tr><td>" + data[i].subject + "</td><td>" + data[i].body + "</td></tr>"; 
    } 
    html += "</table"; 
    $('#board').html(html); 
}

你明白了。如果您有時間研究更好的解決方案，我也建議您查看模板庫mustache.js。這樣可以讓您將模板與數據分開，並消除使用Javascript的HTML和數據的醜陋串聯。（雖然這是一種更高級的解決方案，但您可能希望保持簡單。）Mustache.js引擎允許您像這樣編寫上述內容：

var template = "{{#item}}<tr><td>{{subject}}</td><td>{{body}}</td></tr>{{/item}}"; 
var html = "<table>" + mustache.render(template, data) + "</table>"; 
$("#board").html(html);

來源

2012-05-07 23:51:11 McGarnagle

我很重視一個觀點，顯示從MySQL查詢直接取得的數據。有沒有人可以使用該視圖來顯示此數據？它的很多HTML ...並把它放入JavaScript聽起來非常困難。 –

success: function(data){ 
$.each(data, function(index, value) { 
    $('#board').append(index + ': ' + value + '<br/>'); 
}); 
}

您也可以直接從JSON

success: function(data) { 
    $('#board').append('Thread Subject' + data.subject); 
}

來源

2012-05-07 23:41:38

謝謝！它最終做了一些事情。雖然它返回這個：0：[對象對象] 1：[對象對象] 2：[對象對象] –

你可以給一個console.log（數據）的成功和粘貼這裏什麼是由螢火蟲打印？ –

我相信它展示了我在問題中發佈的同一件事（第二個代碼帖子）。我新來的螢火蟲，並不知道如何完成你所要求的 –

在javascript頁面上顯示JSON數據

回答

相關問題