用jquery插入html不起作用

Question

我正在構建一個簡單的留言箱。

這裏的HTML：

<div id="shoutbox">  
    <form method="post" id="form" class="shoutbox-form"> 
     <table> 
      <tr> 
       <td><label>User</label></td> 
       <td><input class="text user" id="nick" type="text" MAXLENGTH="25" /></td> 
      </tr> 
      <tr> 
       <td><label>Message</label></td> 
       <td><input class="text" id="shout" type="text" MAXLENGTH="255" /></td> 
      </tr> 
      <tr> 
       <td></td> 
       <td><input id="send-shout" type="submit" value="Dodaj!" /></td> 
      </tr> 
     </table> 
    </form> 
    <div id="shoutbox-container"> 
     <span class="clear"></span> 
     <div class=".shoutbox"> 
      <div id="shoutbox-loading"><img src="css/images/loading.gif" alt="Loading..." /></div> 
      <ul> 
      </ul> 
     </div> 
    </div> 
</div 

>

這裏的js代碼：

$(document).ready(function(){ 
    var inputUser = $("#nick"); 
    var inputMessage = $("#shout"); 
    var loading = $("#shoutbox-loading"); 
    var messageList = $(".shoutbox > ul"); 

    function updateShoutbox(){ 
     messageList.hide(); 
     loading.fadeIn(); 
     $.ajax({ 
      type: "POST", 
      url: "/shouts/", 
      data: "action=refresh", 
      success: function(data){ 
       var data = JSON.parse(data); 
       loading.fadeOut(); 
       messageList.html(data["response"]); 
       messageList.fadeIn(2000); 
      } 
     }); 
    } 
}); 

但顯然messageList.html（數據[ 「迴應」]）不起作用雖然螢火蟲顯示我的迴應是：

{"response": "<li><strong>user1</strong><img src=\"\" alt=\"\" >test<span class=\"date\">2010-10-07 19:36:13</span></li><li><strong>user2</strong><img src=\"\" alt=\"\" >test2<span class=\"date\">2010-10-07 20:23:56</span></li>"}

如果不是success在阿賈克斯我有complete我得到var data = JSON.parse(data);錯誤。任何想法可以改變以解決這個問題？

UPDATE：

添加：

var c = data["response"]; 
    console.log(c); 

給我：
<li><strong>user1</strong><img src="" alt="" >test<span class="date">2010-10-07 19:36:13</span></li><li><strong>user2</strong><img src="" alt="" >test2<span class="date">2010-10-07 20:23:56</span></li> 在Firebug控制檯。

Answer 1

沒有人注意到你的html中的錯誤。

<div class=".shoutbox"> 

應該是：

<div class="shoutbox"> 

修復了，看看你的jQuery的東西的作品。

編輯正如其他答案中所提到的，您還應該將您的響應類型設置爲JSON。這將避免你必須在數據上使用JSON.parse()。但是，如果您在響應數據上使用了JSON.parse()，則這不是必需的。

Answer 2

我得到var data = JSON.parse（data）;錯誤

您引用的回覆不是JSON，是嗎？它是HTML。只需直接插入它，它應該工作。

Answer 3

你應該讓你的通話組JSON作爲dataType：

$.ajax({ 
    type: "POST", 
    url: "/shouts/", 
    data: "action=refresh", 
    dataType: 'json', 
    success: function(data){ 
     loading.fadeOut(); 
     messageList.html(data["response"]); 
     messageList.fadeIn(2000); 
    } 
}); 

這得到了jQuery自動解析JSON，給你數據返回的對象。

這可能會解決您的問題。至少它會爲您處理JSON解釋並防止出現跨瀏覽器問題。

Answer 4

我愛跟進最新的插件

爲什麼你不爲你的JSON響應只，然後用新的jQuery Templating Plugin

填充他們的詳細信息有關使用此插件

http://net.tutsplus.com/tutorials/javascript-ajax/quick-tip-working-with-the-official-jquery-templating-plugin/

Answer 5

正確答案：

$(document).ready(function(){ 
    var inputUser = $("#nick"); 
    var inputMessage = $("#shout"); 
    var loading = $("#shoutbox-loading"); 
    var messageList = $(".shoutbox > ul"); 

    function updateShoutbox(){ 
     messageList.hide(); 
     loading.fadeIn(); 
     $.ajax({ 
      type: "POST", 
      url: "/shouts/", 
      data: "action=refresh", 
      dataType: "json", 
      success: function(data){ 
       loading.fadeOut(); 
       var c = data["response"]; 
       console.log(c); 
       messageList.html(c); 
       messageList.fadeIn(2000); 
      } 
     }); 
    }