用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(data["response"]) 不起作用，尽管 firebug 显示我的响应是：

{"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 在 ajax 我有 complete 我得到 var data = JSON.parse(data); 错误。任何想法可以改变什么来解决这个问题？

更新：

添加：

    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> 在萤火虫控制台中。

Answer 1

没有其他人注意到您的 html 中的错误。

<div class=".shoutbox">

应该是：

<div class="shoutbox">

解决这个问题，看看你的 jQuery 东西是否有效。

EDIT 正如其他答案中提到的，您还应该将响应类型设置为 JSON。这将避免您必须在数据上使用JSON.parse()。但鉴于您在响应数据上使用了JSON.parse()，这不是必需的。

Answer 2

我得到 var data = JSON.parse(data);错误

您引用的响应不是 JSON，是吗？它是 HTML。直接插入就可以了。

Answer 3

你应该将你的调用设置为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

正确答案：

$(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);
            }
        });
    }

Answer 5

我喜欢跟进最新的插件

为什么您不只以 JSON 格式做出响应，然后用新的jQuery Templating Plugin 填充它们

有关使用此插件的更多信息

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