同时使用表单提交和重定向
我目前有一个表单，它正在使用GET方法向附属公司提交数据。问题是，当用户填写表单时，他们被重定向到与GET操作相同的URL，这是一个随机代码的api页面。
我需要填写表单的用户被重定向到我主办的感谢页面，而表单中的信息仍被发送到该附属api页面。
我不能操纵从属api页面。我该怎么做呢？我已经听到了不同的答案，包括POST，Iframe，ajax，onsubmit。
谁能确认哪种方法效果最好，为什么？
回答 5
Stack Overflow用户
发布于 2012-08-14 04:06:17
编辑在聊天中讨论了一些事情后，我们得出结论，服务器端发布是一种更好的方法。下面是一个实现示例：
HTML：
<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>Javascript：
$('#my_form').on('submit', function (e){
$.ajax({
type: "POST",
url: "localProxy.php",
data: $('#my_form').serialize(),
success: function (response) {
// do something!
},
error: function () {
// handle error
}
});
});PHP (localProxy.php)
$ch = curl_init();
curl_setopt ($ch, CURLOPT_URL, 'http://thirdpartydomain.internet/login_url.php');
curl_setopt ($ch, CURLOPT_SSL_VERIFYPEER, FALSE);
curl_setopt ($ch, CURLOPT_USERAGENT, "Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.6) Gecko/20070725 Firefox/2.0.0.6");
curl_setopt ($ch, CURLOPT_TIMEOUT, 60);
curl_setopt ($ch, CURLOPT_FOLLOWLOCATION, 0);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ch, CURLOPT_POSTFIELDS, $_POST);
curl_setopt ($ch, CURLOPT_POST, 1);
$result = curl_exec ($ch);
curl_close($ch);
// do something with the data on your end (if anything), or render the "thank you" page
die('<h1>Thanks!</h1>');原始答案
有几种方法。
第一种方式是(通过标记)提到您有jQuery --在这种情况下，您可以使用jquery的ajax方法将数据发布到jquery，也可以将数据发布到您自己的服务器以获得感谢消息。
<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>..。在你的"ready“函数中：
var API_URL = 'http://www.some-api-provider.com/api.php';
var MY_URL = 'http://www.my-website.net/post_handler.php';
$('#my_form').on('submit', function (e){
e.preventDefault();
var error = false;
// validation here, if there is an error, set error = true;
if (error == true) {
alert('There was a problem!'); // do something better than this!
return false;
}
$.ajax({
type: 'GET',
url: API_URL,
data: $('my_form').serialize(),
success: function () {
$.ajax({
type: 'POST',
url: MY_URL,
data: $('#my_form').serialize(),
success: function (response) {
$('status_message').html(response);
},
error: function () {
alert('There was a problem!'); // do something better than this!
}
});
},
error: function () {
alert('There was a problem!'); // do something better than this!
}
});
return false;
});那是怎么回事？我们使用on事件将事件侦听器绑定到表单的“submit”事件。当用户单击Submit按钮时，将调用该侦听器代码。
反过来，它将序列化表单的数据，然后通过GET将API发送给它。只要能正常工作，它就会调用成功函数，该函数将通过POST将数据发送到您的服务器。div status_message将使用从服务器返回的结果进行更新。
另一种方法是正常地将数据发布到服务器，然后使用cURL或其他服务器端HTTP连接将数据提交给应用编程接口。我可能更喜欢这种方法，因为它对javascript的依赖较少；如果您的用户关闭了脚本，javascript方法将失败。
如果不知道您使用的是什么服务器端技术，我无法给出任何示例，但如果您走这条路并遇到麻烦，您总是可以问另一个问题！
Documentation
jQuery.ajax()- http://api.jquery.com/jQuery.ajax/jQuery.on()- http://api.jquery.com/on/- PHP教程- http://php.net/manual/en/book.curl.php
- ASP.net
WebRequest教程- http://msdn.microsoft.com/en-us/library/debx8sh9.aspx
Stack Overflow用户
发布于 2012-08-14 03:53:19
使用ajax和onSubmit事件将数据发送到您的api，然后重定向。
$('form').onSubmit(function(){
$.ajax({
... //your informations to send to the api
success:function(){
...//your redirection to the success page
}
});
});有关ajax in jquery的更多信息
Stack Overflow用户
发布于 2012-08-14 03:55:12
使用jquery是一个很好的方法。下面是我会怎么做
$("#formID").submit(function()
{
$.get('getUrl', { param1Name: param1Data, param2Name: param2Data (etc...) }, function(data)
{
document.location = "redirectURL";
});
return false;
});https://stackoverflow.com/questions/11945501
复制相似问题
腾讯云开发者
