Fatal编程技术网
  • javascript/
  • Javascript jQuery提交表单并获取响应

Javascript jQuery提交表单并获取响应

javascript jquery html forms

Javascript jQuery提交表单并获取响应,javascript,jquery,html,forms,Javascript,Jquery,Html,Forms,我有一个网页，将提交一个表格，并重定向到另一个页面。有没有办法通过jQuery实现这一点，并在回调函数中获取响应页面？这样页面就不会重定向，我可以在同一页面中显示来自服务器的消息 我尝试了以下代码，但不起作用： $('#reset-password-form').submit(function(data){ console.log(data); return false; }); 此外，我还尝试了以下代码段，但同样无效： $('#reset-password-form').su

我有一个网页，将提交一个表格，并重定向到另一个页面。有没有办法通过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部分： 

重置密码
不要返回任何内容，返回false将退出表单提交

<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.');
            }
        });
}


重置密码
函数formSubmit（）{
$.ajax({
url:window.location.href，
//contentType:“多部分/表单数据”，
cache:false，
//contentType:'text/html'，
contentType:'application/x-www-form-urlencoded'，
//processData:false，
键入：“POST”，
数据：$（'#重置密码形式'）。序列化（），
成功：功能（数据）{
控制台日志（数据）；
console.log（“已提交表单”）；
},
错误：函数（数据）{
控制台日志（数据）；
log（'formerror'）；
},
故障：功能（数据）{
控制台日志（数据）；
log（'表单提交失败'）；
}
});
}
不要返回任何内容，返回false将退出表单提交

<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.');
            }
        });
}


重置密码
函数formSubmit（）{
$.ajax({
url:window.location.href，
//contentType:“多部分/表单数据”，
cache:false，
//contentType:'text/html'，
contentType:'application/x-www-form-urlencoded'，
//processData:false，
键入：“POST”，
数据：$（'#重置密码形式'）。序列化（），
成功：功能（数据）{
控制台日志（数据）；
console.log（“已提交表单”）；
},
错误：函数（数据）{
控制台日志（数据）；
log（'formerror'）；
},
故障：功能（数据）{
控制台日志（数据）；
log（'表单提交失败'）；
}
});
}
从函数中删除
数据
，不要返回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
 });
从函数中删除
数据
，不要返回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
 });
你可以用这个

重置密码
$（“#重置通过”）。在（“单击”上，函数（事件）{
$.ajax({
url:window.location.href，
//contentType:“多部分/表单数据”，
cache:false，
//contentType:'text/html'，
contentType:'application/x-www-form-urlencoded'，
//processData:false，
键入：“POST”，
数据：$（'#重置密码形式'）。序列化（），
成功：功能（数据）{
控制台日志（数据）；
console.log（“已提交表单”）；
},
错误：函数（数据）{
控制台日志（数据）；
log（'formerror'）；
},
故障：功能（数据）{
控制台日志（数据）；
log（'表单提交失败'）；
}
});
})
您可以使用此

重置密码
$（“#重置通过”）。在（“单击”上，函数（事件）{
$.ajax({
url:window.location.href，
//contentType:“多部分/表单数据”，
cache:false，
//contentType:'text/html'，
contentType:'application/x-www-form-urlencoded'，
//processData:false，
键入：“POST”，
数据：$（'#重置密码形式'）。序列化（），
成功：功能（数据）{
控制台日志（数据）；
console.log（“已提交表单”）；
},
错误：函数（数据）{
控制台日志（数据）；
log（'formerror'）；
},
故障：功能（数据）{
控制台日志（数据）；
log（'表单提交失败'）；
}
});

})
当我删除
返回false
时，页面正在重新加载。我不想重新加载页面。请不要使用表单提交。改为调用上述函数。您可以尝试提交。它仍在重定向。这是因为您的表单正在提交。当我删除
返回false
时，页面正在重新加载。我不想重新加载页面。请不要使用表单提交。改为调用上述函数。您可以尝试提交。它仍在重定向。这是因为您的表单正在提交。但我没有收到HTML页面响应！！这与添加
returnfalse有什么不同最后？我认为在不提交表单的情况下调用ajax的最好方法是，@KharkoozaBoche可以使用按钮id和on（“单击”）来使用ajax。在这之后，页面也在重新加载。你确定吗？因为这个不提交表单，所以当普通按钮点击并运行jquery时触发，但是我没有得到HTML页面响应！！这与添加
returnfalse有什么不同最后？我认为在不提交表单的情况下调用ajax的最好方法是，@KharkoozaBoche可以使用按钮id和on（“单击”）来使用ajax。在这之后，页面也在重新加载。你确定吗？因为这不提交表单，所以当普通按钮单击并运行jquery时触发ajax@hasan不，那是完全错误的。拦截表单提交的最佳方式是通过
onSubmit
事件。事件侦听器末尾的OP的
返回false
将阻止表单提交。如果没有更多信息，很难诊断AJAX请求不起作用的原因。以下是一些有帮助的步骤，您可以随时用更多信息更新您的问题。（1） 调用的端点是否正确（即调用的URL是否有效）？（2） 服务器的响应是什么？检查你的