Javascript 我如何提交表单并在完成后转到另一个页面？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14669745/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can i submit a form and go to another page when its done?
提问by Harry Kolloly
I have this form
我有这个表格
Your email你的邮件Reciever email收件人电子邮件
Subject主题
Message信息
How can I submit this data and go to another page (using any of the languages tagged)? Please help.
我如何提交这些数据并转到另一个页面（使用任何标记的语言）？请帮忙。
回答by Ankur Sinha
If I got your question right, your answer would be:
如果我答对了你的问题，你的答案是：
Your submit button must be like this:
你的提交按钮必须是这样的：
<form method="POST" action="file.php">
<!-- Whatever data you want to submit -->
<input type="submit" value="Submit">
</form>
And your PHP file.php must be:
你的 PHP file.php 必须是：
<?php
if(isset($_POST['submit']))
{
//Do all the submission part or storing in DB work and all here
header('Location: whateverpath.php');
}
?>
Let me know if this is what you wanted
让我知道这是否是你想要的
回答by Aditya Amit
if you are using only PHP to get things done, then use the following code to redirect to another page.
如果您只使用 PHP 来完成任务，请使用以下代码重定向到另一个页面。
header('Refresh: 5; URL= navigated.php');
Here, 5 is the refresh timer to redirect & URL defines where you like to go. Don't forget just one thing, never write an echo statement before this header function.
这里，5 是重定向的刷新计时器，URL 定义了你想去的地方。不要忘记一件事，永远不要在这个头函数之前写一个 echo 语句。
If you wanna do it by javascript or jquery, add the following line at the end.
如果您想通过 javascript 或 jquery 来完成，请在最后添加以下行。
window.location.href=navigated.php;
Here, navigated.php is the page where you wanna be redirected.
在这里，naviated.php 是您要重定向的页面。
Good Luck!
祝你好运！
回答by asifrc
An alternative to going from page A to page B(PHP) then to page C is to submit an ajax post from A to B, validate, and then proceed directly to page C. The benefit of this is that you can do server-side validation (which occurs on page B), and warn your user on page A without ever leaving or reloading it. Otherwise you would have to go from A to B then back to A.
从页面 A 到页面 B（PHP）然后到页面 C 的另一种方法是从 A 到 B 提交一个 ajax 帖子，验证，然后直接进入页面 C。这样做的好处是你可以做服务器端验证（发生在页面 B 上），并在页面 A 上警告您的用户，而无需离开或重新加载它。否则，您将不得不从 A 转到 B，然后再回到 A。
<script>
$(function() {
$('form').submit(function() {
//Initial validation
if($('#input1').val()=="")
{
alert("field is blank!");
return false
}
//After validating form, send to page B
$.post('PageB.php', {
'field1': $('#input1').val(),
'field2': $('#input2').val()
//etc
}, function (data) {
//Validate the response from Page B
if (data!="success")
{
alert("Error:"+data);
}
else
{
//Go to Page C if Page B was successful
window.location.href = "nextpage.html";
}
});
return false;
});
</script>
回答by Mohpreet.......
it is very easy using JQuery and AJAX and type of the server side script like JSP servlets or PHP. In my case I am Utilizing the JSP as server side script, and JQuery's AJAX support to submit to the server side script.
使用 JQuery 和 AJAX 以及像 JSP servlet 或 PHP 这样的服务器端脚本的类型非常容易。就我而言，我使用 JSP 作为服务器端脚本，并使用 JQuery 的 AJAX 支持提交到服务器端脚本。
code for Server Side Components Goes here..
服务器端组件的代码在这里..
page2.jsp
page2.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<h1 style="color:red">Contents from Page 2</h1>
<%=request.getParameter("parmeter")%>
</body>
</html>
code for the client side script goes here..
客户端脚本的代码在这里..
pag1.html
pag1.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script>
function submitRequest(){
var v= document.getElementById("test1").value;
alert(v);
$.ajax({url:"page2.jsp?parmeter="+v,
error: function (xhr, ajaxOptions, thrownError) {
alert("fail");
alert(xhr.status);
alert(thrownError);
},
success:function(result){
alert("sucesses");
$("#mydiv").html(result);
}
});
}
</script>
</body>
<form>
<!-- Whatever data you want to submit -->
<input type="text" id="test1"><br>
<input type="button" value="Submit" onclick="submitRequest()">
</form>
<div id="mydiv">
Contents of Page 2 jsp will be displayed here
</div>
</html>
on click of submit what ever is typed in the text box gets submitted to the function submitRequest()and this function makes a AJAX call to the other page submits the request to the page2.jsp. page2.jsp just displays the received parameter hence we can opt for displaying the result of page2 on the current page by coding inside the AJAX call back function for successas shown above.
单击提交时，在文本框中键入的内容将提交给该函数submitRequest()，该函数对其他页面进行 AJAX 调用，将请求提交给 page2.jsp。page2.jsp只是显示接收到的参数，因此我们可以选择通过为AJAX回调函数内部编码的当前页面上显示第2页的结果成功如上图所示。
it will replace the contents of the current page with page requested through AJAX request. showing that we are bale to submit the details to other page
它将用通过 AJAX 请求请求的页面替换当前页面的内容。显示我们无法将详细信息提交到其他页面
