Question

我正在尝试通过JQuery的.ajax函数提交表单，而不会在提交时重定向用户。表单本身和后端代码正常工作。但是，我遇到了阻止重定向的问题。我在我的提交处理程序中添加了preventDefault()，但它仍然将我重定向到我的表单action属性中提供的页面。我还尝试在提交处理程序的末尾添加return false;，它仍然会重定向。

我的JQuery代码如下所示：

$("#new_comments").submit(function(e)
{
//  e.preventDefault(); //STOP default action
    $.ajax(
    {
        url : $(this).attr("action"),
        type: "POST",
        data : $(this).serializeArray(),
        success:function(data, textStatus, jqXHR) 
        {
            // Doing things here
        },
        error: function(jqXHR, textStatus, errorThrown) 
        {
            // Doing things here too
        }
    });
    return false;
});

HTML表单：

<form name="new_comments" id="new_comments" action="{{ url_for('add_comment_data') }}" method="POST">
    <div id="InputsWrapper">
        <div>
            <input type="text" name="comments[]" id="comment_1" value=""/><a href="#" class="removeclass">&times;</a>
            <input type="text" name="comments[]" id="comment_2" value=""/><a href="#" class="removeclass">&times;</a>
            <input type="text" name="comments[]" id="comment_3" value=""/><a href="#" class="removeclass">&times;</a>
        </div>
    </div>
    <button class="btn btn-info" id="simple-post">Add Comments</button>
</form>

输入字段实际上是通过用户输入动态添加的，但如果用户输入三条注释，这就是表单的样子。

如何阻止重定向并维护现有功能？在发布的jquery代码中，它会重新定向preventDefault取消注释或return false。

Answer 1

您的代码似乎工作正常。提交被忽略了：

JSFiddle：http://jsfiddle.net/TrueBlueAussie/yPbtz/

$(function () {
    $("#new_comments").submit(function (e) {
        e.preventDefault(); //STOP default action
        $.ajax({
            url: $(this).attr("action"),
            type: "POST",
            data: $(this).serializeArray(),
            success: function (data, textStatus, jqXHR) {
                // Doing things here
            },
            error: function (jqXHR, textStatus, errorThrown) {
                // Doing things here too
                alert('error');
            }
        });
        return false;
    });
});

您是否将代码包装在jQuery文档就绪事件中，如图所示，或者您是否未能包含jQuery本身。其中任何一个都会导致忽略jQuery并发生回发。

e.g。如果你删除了加载事件处理程序，或者从JSFiddle菜单（左上角）取消选择jQuery，它将回发并忽略你的代码。

在表单提交后，preventDefault和return false仍然会重定向用户

1 个答案:

JSFiddle：http://jsfiddle.net/TrueBlueAussie/yPbtz/