Ajax 表单提交后如何将用户重定向到另一个页面?
Posted
技术标签:
【中文标题】Ajax 表单提交后如何将用户重定向到另一个页面?【英文标题】:How to redirect user to another page after Ajax form submission? 【发布时间】:2013-07-18 22:04:02 【问题描述】:我在成功完成表单后将用户重定向到感谢页面时遇到问题。发生的情况是,在表单提交后,它会转到一个空白页面 (https://cunet.sparkroom.com/Sparkroom/postLead)...我需要它重定向到感谢页面,同时将表单详细信息提交到“表单操作”中的 URL。
html 代码:
<form action="https://cunet.sparkroom.com/Sparkroom/postLead/" method="post" name="theForm"
id="theForm" onSubmit="return MM_validateForm();" >
...
</form>
Ajax 代码:
<script src="http://malsup.github.com/jquery.form.js"></script>
<script>
$('#theForm').ajaxForm(function()
window.location.href = "I want the user to be redirected to this page";
);
</script>
function MM_validateForm()
if ( !jQuery('#theForm #FirstName').val() )
alert('Please input your first name.');
jQuery('#theForm #FirstName').focus();
return false;
if ( !jQuery('#theForm #LastName').val() )
alert('Please input your last name.');
jQuery('#theForm #LastName').focus();
return false;
if ( !jQuery('#theForm #daytimephone').val() )
alert('Please input your phone number.');
jQuery('#theForm #daytimephone').focus();
return false;
if ( !jQuery('#theForm #Email').val() )
alert('Please input your email.');
jQuery('#theForm #Email').focus();
return false;
if ( !jQuery('#theForm #BID').val() )
alert('Please select your preferred campus.');
jQuery('#theForm #BID').focus();
return false;
if ( !jQuery('#theForm #programs').val() )
alert('Please select your preferred program.');
jQuery('#theForm #programs').focus();
return false;
if ( !jQuery('#theForm #How_Heard').val() )
alert('Please select how you heard about us.');
jQuery('#theForm #How_Heard').focus();
return false;
return true;
// ]]></script>
有谁知道我做错了什么?我需要表单将数据提交到 URL,然后在将用户重定向到“谢谢”页面后,现在这根本没有发生。
【问题讨论】:
只是出于好奇,如果要将用户重定向到感谢页面,为什么还要使用 Ajax? How to redirect user to another page after Ajax form submission的可能重复 【参考方案1】:您可以使用 jquery 处理提交帖子,因此您必须取消表单中的操作
<form name="theForm" id="theForm" >
只需给提交按钮一个类或 ID
<submit class='submitTheForm'....>
代码是这样的。你只需要包含所有具有正确名称的表单变量。
然后在MM_validateForm()的底部添加jquery post请求
if ( !jQuery('#theForm #How_Heard').val() )
alert('Please select how you heard about us.');
jQuery('#theForm #How_Heard').focus();
return false;
$.post("https://cunet.sparkroom.com/Sparkroom/postLead/",
FirstName:FirstName,
LastName:LastName
...
...
,
function()
window.location.href = 'thank you page'
);
最后在提交按钮被点击时调用函数 MM_validateForm()
$('.submitTheForm').click( function()
MM_validateForm();
);
来自http://api.jquery.com/jQuery.post/的jquery帖子,其余来自个人经验。
【讨论】:
【参考方案2】:表单发布成功后有两种方式重定向用户。
1) 您可以在 ajax 提交中放置一个成功事件,您可以在其中简单地将用户重定向到感谢页面。
2) 表单后期处理完成后使用服务器端功能 对于 php 中的 Ex:
header("Location: http://thankyoupage.html");
【讨论】:
我将如何执行选项 1?您有任何代码可以提供示例吗? 在您的验证函数中添加这些行。 var url = "cunet.sparkroom.com/Sparkroom/postLead"; var data = jQuery('#theForm').serialize(); jQuery.ajax( url : url, type : 'post', data : data, success : function() window.location.href = "thankyou.com"; );【参考方案3】:试试
window.location.href = "http://www.msdn.com";
【讨论】:
这意味着 HTTP Get 请求表单提交是 Post。【参考方案4】:试试:
$('#theForm').ajaxForm(function()
success : function()
window.location.href = "Url to redirect here in the success option";
);
【讨论】:
不错!这对我来说就像一个魅力! :) 在阅读了 10 多个关于保存窗口等的问题之后。谢谢!以上是关于Ajax 表单提交后如何将用户重定向到另一个页面?的主要内容,如果未能解决你的问题,请参考以下文章