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);

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

1 个答案: