Post Form Data Created By An Ajax Call To A Remote Url

I would like to perform a two stage post. The first is an AJAX post to my own service that creates form data such as 'email=blah&dude=car' etc. In the callback for the AJAX ca

Solution 1:

You realize that due to same origin policy restrictions sending an AJAX request to http://remotepage.com (xmlhttp.open("POST","http://remotepage.com",true);) wouldn't work unless your site is hosted on http://remotepage.com.

So to achieve this you would need to setup a server side script on your domain which would act as bridge between your domain and the remote domain and you would then send an AJAX request to your script. Also because you are using jquery it would seem more natural to use it in the success callback as well:

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

If the remote domain supports JSONP you could directly send the request to it but it is only limited to GET requests.

Solution 2:

You need to send a background GET request to remotepage.com asking for the form for the resource you want to modify/create. This will allow remotepage to set authenticity tokens in your cookie store. Keep this form hidden, populate it with data that was successfully posted to myservice, and post the hidden form. This way remotepage.com will have a chance to check that you are trusted.

EDIT: added code samples

Here's a bit of sample code on what I'm envisioning:

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

So instead of returning text, myservice should return a json object containing the processed data you talk about in your comment below. The callback will request the form you want from remotepage. Once its done loading, the block in the anonymous function() will be executed, which populates the form, then submits it.

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

Also, make sure the form is hidden using css:

#empty_container_for_form { display: none; }