在适当的范围/上下文中保持jQuery AJAX成功响应

Question

我的内容是动态生成的，每个内容项都包含一个简单的一键式表单，可以将这些内容项之一添加到收藏夹列表中或从收藏夹列表中删除。 我正在使用jQuery的ajax方法发布表单并获取响应，并且一切工作正常，除了将成功回调应用于每个表单中的每个按钮元素时（仅应将其应用于单击的按钮）。 我已经为此苦苦挣扎了好几个小时，但不确定为什么它不在正确的范围内。

这是我的jQuery：

$('form.ajax').on('submit', function(){
    var that = $(this),
        url = that.attr('action'),
        type = that.attr('method'),
        data = {};

    that.find('[name]').each(function(index, value) {
        var that = $(this),
            name = that.attr('name'),
            value = that.val();

        data[name] = value;
    });

    $.ajax({
        url: url,
        type: type,
        data: data,
        success: function(response) {
            $('button').text(response);
        };
    });

    return false;
});

这是生成的表单：

if($user->isLoggedIn()) {
    $addFave = NULL;
    $favorites = DB::connectDB()->query("SELECT * FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'");
    $matches = mysqli_num_rows($favorites);
    if ($matches == 0) {
        $addFave = '
            <form action="../app/parsers/faves_addremove.php" method="post" class="ajax">
                <input type="hidden" name="user" value="' . escape($user->data()->id) . '">
                <input type="hidden" name="favid" value="' . ++$nfave . '">
                <button id="addFave" class="btn rb-faucet-button btn-default bg-color-1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Add To Faves</button>
            </form>
        ';
    } else {
        $addFave = '
            <form action="../app/parsers/faves_addremove.php" method="post" class="ajax">
                <input type="hidden" name="user" value="' . escape($user->data()->id) . '">
                <input type="hidden" name="favid" value="' . ++$nfave . '">
                <button id="addFave" class="btn rb-faucet-button btn-default bg-color-1"><span class="glyphicon glyphicon-star" aria-hidden="true"></span> Remove From Faves</button>
            </form>
        ';
    }
} else {
    $addFave = '';
}

最后，这里是ajax用来从数据库中添加/删除并生成我的响应的脚本：

if(isset($_SESSION['userid'])){
    if (isset($_POST['user'], $_POST['favid'])) {
        if ($_POST['user'] = $user->data()->id) {
            $userid = $_POST['user'];
            $favid = $_POST['favid'];

            $favorites = DB::connectDB()->query("SELECT * FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'");
            $matches = mysqli_num_rows($favorites);
            if ($matches == '0') {
                DB::connectDB()->query("INSERT INTO ajaxfavourites (user, favid) VALUES ('{$userid}', '{$favid}')");
                echo "Added";
            }
            if ($matches != '0') {
                DB::connectDB()->query("DELETE FROM ajaxfavourites WHERE user = '{$userid}' AND favid = '{$favid}'");
                echo "Deleted";
            }
        } else {
            echo "Invalid user.";
        }
    }
} else {
    echo "Invalid session.";
}

如果单击按钮以将项目添加到ajaxfavourites表中，则“添加”的响应文本将应用于页面上具有“ ajax”类的任何表单内的每个按钮元素。 我想念什么？ 虽然我在范围上有适当的选择，但我尝试过的任何方法似乎都没有效果。

Answer 1

您要寻址成功回调中的所有按钮， $('button')将返回页面上的所有按钮。

您应该使用类似以下的内容：

success: function(response) {
    that.find('button').text(response);
}

由于that是指您正在使用的form ，因此查找应检索表单中的所有button元素。

如果表单中有多个按钮，则应为其提供一个描述性类。 即that.find('button.useThisButton').text(response);