Question

问题

成功进行AJAX调用后，我想更新页面上的元素。但是，它没有更新。

代码[Javascript]

$(function()
{
    $(".upvote").click(function()
    {
        var id = $(this).parent().find("input").val();
        $.ajax(
        {
            type: "GET",
            url: "process.php",
            data: "id=" + id +"&f=u",

            success: function(results)
            {
                $(this).parent().parent().find("span.ups").empty().append("Upvotes: " + results);
                console.log(results);
            }
        });
        return false;
    });
});

代码[HTML]

此代码由PHP生成。

<div class="post">
    <h2>$title</h2>
    <p>$body</p>
    <span class="ups">Upvotes: $upvotes</span>
    <span class="downs">Downvotes: $downvotes</span>
    <span class="total">Total votes: $t_votes</span>
    <div id="links">
        <input type="hidden" id="id" name="id" value="$id">
        <a href="process.php?id=$id&f=u" class="upvote"><button>Upvote!</button></a>
        <a href="process.php?id=$id&f=d" class="downvote"><button>Downvote!</button></a>
    </div>
</div>

由PHP返回

更新的upvotes数量。

Answer 1

this不是您认为的那样。它的值取决于它出现的函数是如何被调用的（当在一个不同的函数内部时它会改变）。

我不知道它在jQuery成功回调中会是什么，但它不会是HTML元素。

如果您希望它是被点击的元素，那么您需要存储它，而this是该元素。

$(".upvote").click(function() {
    var clicked_element = this;

然后你可以在以后使用该变量：

$(clicked_element).parent().etc

Answer 2

您不能使用this这样的关键字。

var that = null;

$(function()
{
    $(".upvote").click(function()
    {
        var id = $(this).parent().find("input").val();
        that = $(this);
        $.ajax(
        {
            type: "GET",
            url: "process.php",
            data: "id=" + id +"&f=u",

            success: function(results)
            {
                that.parent().parent().find("span.ups").empty().append("Upvotes: " + results);
                console.log(results);
            }
        });
        return false;
    });
});

我没有对此进行测试，但它应该可行。

干杯。

Answer 3

$(this)回调中的

success不是您可能认为的元素。最好缓存父对象并从那里遍历：

var $post = $('.post');

//... $.ajax etc

success: function() {
    $post.find('.ups').etc //...

成功进行AJAX调用后更新元素

3 个答案: