Опубликовать данные формы, созданные с помощью ajax-вызова, на удаленный URL

Question

Я хотел бы выполнить двухэтапный пост. Первая - это запись AJAX для моего собственного сервиса, которая создает данные формы, такие как «email = blah & dude = car» и т. Д.

В обратном вызове для вызова AJAX мне нужно отправить эти данные на удаленный сайт в обычном сообщении.

Я думал что-то вроде:

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
             xmlhttp=new XMLHttpRequest(); 
                        xmlhttp.open("POST","http://remotepage.com",true); 
                        xmlhttp.send(data);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

Однако httpRequest не будет выполнен из-за предотвращения XSS на remotepage.com. Как я могу легко отправить обработанные данные формы на удаленный URL?

Answer 1

Вы понимаете, что из-за тех же ограничений политики происхождения отправка запроса AJAX на http://remotepage.com (xmlhttp.open("POST","http://remotepage.com",true);) не будет работать, если ваш сайт не размещен на http://remotepage.com.

* 1007.* Таким образом, для достижения этой цели вам потребуется настроить серверный скрипт на вашем домене, который будет служить мостом между вашим доменом и удаленным доменом, и вы затем отправите запрос AJAX на ваш скрипт.Кроме того, поскольку вы используете jquery, было бы более естественным использовать его и в обратном вызове успеха:

var formData = "some form data";
$.ajax({
    type: 'POST',
    url: '/myservice', 
    data: formData,
    success: function(data, status) {
        $.post('/some_bridge_script', formData);
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
        //display error message     },
    dataType: "text",
});

Если удаленный домен поддерживает JSONP , вы можете напрямую отправить запрос на него.но он ограничен только запросами GET.

Answer 2

Вам необходимо отправить фоновый GET-запрос на remotepage.com с запросом формы для ресурса, который вы хотите изменить / создать. Это позволит удаленной странице устанавливать токены подлинности в вашем хранилище cookie. Оставьте эту форму скрытой, заполните ее данными, которые были успешно отправлены на myservice, и опубликуйте скрытую форму. Таким образом, у remotepage.com будет возможность проверить, что вам доверяют.

РЕДАКТИРОВАТЬ: добавлены примеры кода

Вот пример кода на то, что я представляю:

var formData = "some form data";
$.post({
  url: '/myservice', 
  data: formData,
  success: postToRemote,
  dataType: "JSON",
  error: function(XMLHttpRequest, textStatus, errorThrown) {
    // display error message
  },
});

Таким образом, вместо возврата текста myservice должен возвращать объект json, содержащий обработанные данные, о которых вы говорите в своем комментарии ниже. Обратный звонок запросит нужную форму с удаленной страницы. После завершения загрузки будет выполнен блок в анонимной функции (), который заполняет форму и отправляет ее.

function postToRemote(data, status) {
  $("#empty_container_for_form").load("http://remotepage.com/get_hidden_form", function() {
    $("#hidden_form input#attribute_1").val(data.attribute1);
    $("#hidden_form input#attribute_2").val(data.attribute2);
    $.post({
      url: "http://remotepage.com",
      data: $("#hiddenForm").serialize()
    });
  });
}

Также убедитесь, что форма скрыта с помощью css:

#empty_container_for_form { display: none; }