使用表单提交和重定向
我目前有一个表格，使用GET方法向联盟会员提交数据。 问题是，当用户填写表单时，他们被重定向到与GET操作相同的URL，它是随机代码的api页面。
我需要填写表单的用户重定向到我主持的感谢页面，而表单中的信息仍然发送到该联盟api页面。
我无法操纵联盟api页面。 我该怎么做呢？ 我听过不同的答案，包括POST，iframe，ajax，onsubmit。
有人可以确认哪种方法效果最好，为什么？
编辑在讨论聊天内容之后，我们得出结论，服务器端发布是一种更好的方法。 以下是实施示例：
HTML：
使用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('Thanks!
');
原始答案
有几种方法。
第一种方式，你提到（通过标签）你有jQuery – 在这种情况下，你可以使用jquery的ajax方法将数据发布到API 并将其发布到你自己的服务器以获得感谢信息。
…在你的“准备”function中：
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”事件。 当用户单击“提交”按钮时，将调用该侦听器代码。
反过来，它将序列化您的表单数据，然后通过GET将其发送给API。 只要它工作，它将调用成功函数，而成功函数又将通过POST将数据发送到您的服务器。 div status_message将使用服务器返回的结果进行更新。
另一种方法是将数据正常发布到服务器，然后使用cURL或其他一些服务器端HTTP连接将数据提交给API。 我可能会喜欢这种方法，因为它不太依赖于javascript; 如果您的用户关闭了脚本，则javascript方法将失败。
在不知道你正在使用什么服务器端技术的情况下，我无法给出任何示例，但如果你走这条路并遇到麻烦，你总是可以提出另一个问题！
文档
-
jQuery.ajax()– http://api.jquery.com/jQuery.ajax/ -
jQuery.on()– http://api.jquery.com/on/ - PHP
curl– http://php.net/manual/en/book.curl.php - ASP.net
WebRequest教程 – http://msdn.microsoft.com/en-us/library/debx8sh9.aspx
使用ajax和onSubmit事件将数据发送到api并重定向。
$('form').onSubmit(function(){ $.ajax({ ... //your informations to send to the api success:function(){ ...//your redirection to the success page } }); });
有关jquery中ajax的更多信息
使用jquery是一个很好的方法。 这是我怎么做的
$("#formID").submit(function() { $.get('getUrl', { param1Name: param1Data, param2Name: param2Data (etc...) }, function(data) { document.location = "redirectURL"; }); return false; });
最好使用Ajax并在Ajax函数成功时使用重定向
window.location.href =“thankyou.html”;
jquery ajax方法是最好的用于此目的的方法
$.ajax({ type: "POST", url: method path here, data: jsonText, contentType: "application/json; charset=utf-8", dataType: "json", success: function (response) { if (response.d != '') { //redirect code } }, failure: function (response) { alert(response.d); } });