Question

我目前有一个使用GET方法向联盟会员提交数据的表单。问题是，当用户填写表单时，他们被重定向到与GET操作相同的URL，它是随机代码的api页面。

我需要填写表单的用户重定向到我主持的感谢页面，而表单中的信息仍然会发送到该联盟api页面。

我无法操纵联盟api页面。我该怎么做呢？我听过不同的答案，包括POST，iframe，ajax，onsubmit。

有人可以确认哪种方法效果最好，为什么？

Answer 1

编辑在讨论聊天内容之后，我们得出结论，服务器端发布是一种更好的方法。以下是实施示例：

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方法将数据发布到API 和将其发布到您自己的服务器以获取感谢信息。

<form id="my_form">
<!-- form elements -->
</form>
<div id="status_message"></div>

...在你的“准备”功能中：

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

Answer 2

使用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

的更多信息

Answer 3

使用jquery是一个很好的方法。我就是这样做的

$("#formID").submit(function()
{
    $.get('getUrl', { param1Name: param1Data, param2Name: param2Data (etc...) }, function(data)
    {
        document.location = "redirectURL";
    });

    return false;
});

Answer 4

最好使用Ajax，并且在Ajax函数成功时使用

重定向

window.location.href =“thankyou.html”;

Answer 5

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

使用表单提交和重定向

5 个答案: