Question

我正在构建一个简单的shoutbox。

这是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

＆GT;

这是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>user1<img src=\"\" alt=\"\" >test2010-10-07 19:36:13</li><li>user2<img src=\"\" alt=\"\" >test22010-10-07 20:23:56</li>"}

如果ajax中的success代替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>

给我：
{{1}} 在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

正确答案：

$(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/

使用jquery插入html不起作用

5 个答案: