jQuery提交表单并获得回复

Question

我有一个网页，会提交表单并重定向到另一个页面。有没有办法通过jQuery执行此操作，并在回调函数中获取响应页面？这样页面就不会重定向，我可以在同一页面显示来自服务器的消息。

我尝试过以下代码，但它不起作用：

$('#reset-password-form').submit(function(data){
    console.log(data);
    return false;
});

此外，我尝试使用以下代码片段，但也没有效果：

$('#reset-password-form').submit(function(data){
    $.ajax({
        url: window.location.href,
        // contentType: 'multipart/form-data',
        cache: false,
        // contentType: 'text/html',
        contentType: 'application/x-www-form-urlencoded',
        // processData: false,
        type: 'POST',
        data : $('#reset-password-form').serialize(),
        success: function(data){
            console.log(data);
            console.log('form submitted.');
        },
        error:function(data){
            console.log(data);
            console.log('form error.');
        },
        failure: function(data){
            console.log(data);
            console.log('form submit failed.');
        }
    });
    return false;
});

请告知。

添加HTML部分：

<form id="reset-password-form">
   <div data-message-bar="">

   </div>
   <input type="hidden" name="username" value="dummy">
   <input type="hidden" name="validationToken" value="248gf293g2793g273f972">
   <input required="" name="password" type="password">
   <input required="" name="passwordconfirm" type="password">
   <button data-action="reset-password">Reset Password</button>
</form>

Answer 1

不要返回任何内容，返回false ll退出表单提交

<form onSubmit="formSubmit()" id="reset-password-form">
   <div data-message-bar="">

   </div>
   <input type="hidden" name="username" value="dummy">
   <input type="hidden" name="validationToken" value="248gf293g2793g273f972">
   <input required="" name="password" type="password">
   <input required="" name="passwordconfirm" type="password">
   <button data-action="reset-password">Reset Password</button>
</form>

function formSubmit(){
    $.ajax({
            url: window.location.href,
            // contentType: 'multipart/form-data',
            cache: false,
            // contentType: 'text/html',
            contentType: 'application/x-www-form-urlencoded',
            // processData: false,
            type: 'POST',
            data : $('#reset-password-form').serialize(),
            success: function(data){
                console.log(data);
                console.log('form submitted.');
            },
            error:function(data){
                console.log(data);
                console.log('form error.');
            },
            failure: function(data){
                console.log(data);
                console.log('form submit failed.');
            }
        });
}

Answer 2

从函数中删除data并且不返回false

$(document).on('submit', '#reset-password-form',function(e){
   $.ajax({
        url: window.location.href,
        // contentType: 'multipart/form-data',
        cache: false,
        // contentType: 'text/html',
        contentType: 'application/x-www-form-urlencoded',
        // processData: false,
        type: 'POST',
        data : $('#reset-password-form').serialize(),
        success: function(data){
            console.log(data);
            console.log('form submitted.');
        },
        error:function(data){
            console.log(data);
            console.log('form error.');
        },
        failure: function(data){
            console.log(data);
            console.log('form submit failed.');
        }
    })
    .done(function(){
         alert("Done");
         $('#reset-password-form')[0].reset();
    });
    e.preventdefault(); // stop page refresh
 });

Answer 3

你可以用这个

 <button id="resetpass" data-action="reset-password">Reset Password</button>
$("#resetpass").on("click", function(event){
    $.ajax({
            url: window.location.href,
            // contentType: 'multipart/form-data',
            cache: false,
            // contentType: 'text/html',
            contentType: 'application/x-www-form-urlencoded',
            // processData: false,
            type: 'POST',
            data : $('#reset-password-form').serialize(),
            success: function(data){
                console.log(data);
                console.log('form submitted.');
            },
            error:function(data){
                console.log(data);
                console.log('form error.');
            },
            failure: function(data){
                console.log(data);
                console.log('form submit failed.');
            }
        });

})