在适当的范围/上下文中保持 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，因此find 应该检索表单中的所有button 元素。

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