Использование как отправки формы, так и перенаправления

Изменить После обсуждения в чате мы пришли к выводу, что лучше размещать сообщения на стороне сервера. Вот пример реализации:

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' формы. Когда пользователь нажимает кнопку «Отправить», этот код прослушивателя будет вызван.

Он, в свою очередь, сериализует данные вашей формы, а затем отправляет их API через GET. Пока это работает, он будет вызывать функцию успеха, которая, в свою очередь, отправит данные на ваш сервер через 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
  }
 });
});

Дополнительная информация о ajax в jquery

Использование 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);   
     }
     });