0

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 call I need to repost that data to a remote site, in a normal post.

I was thinking something like:

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

However, the httpRequest will fail due to XSS prevention on remotepage.com. How can I easily repost the processed form data to the remote URL?

user648960
  • 1
  • 1
  • 1

2 Answers2

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.

Darin Dimitrov
  • 1,023,142
  • 271
  • 3,287
  • 2,928
  • Nice restatement of his question. – mellamokb Mar 07 '11 at 23:33
  • Ok. What if I was to build a virtual form, and then use .submit()? – user648960 Mar 07 '11 at 23:45
  • Your suggestion regarting JSONP is a very un-RESTful design, is it not? – muirbot Mar 07 '11 at 23:48
  • Ok. What if I was to build a virtual form, and then use .submit()? ie. var submitForm = document.createElement("FORM"); document.body.appendChild(submitForm); submitForm.method = "POST"; submitForm.submit(); – user648960 Mar 07 '11 at 23:51
  • @user648960, creating a form would do you no good because remotepage.com still hasn't had a chance to authenticate you. – muirbot Mar 07 '11 at 23:54
  • I can include an HTML form in my page that lets users post information to Paypal... So why can't I automate that Post process? There must be a way. – user648960 Mar 08 '11 at 00:12
0

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.

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

Also, make sure the form is hidden using css:

#empty_container_for_form { display: none; }

muirbot
  • 2,061
  • 1
  • 20
  • 29
  • I can include an HTML form in my page that lets users post information to Paypal... So why can't I automate that Post process? – user648960 Mar 08 '11 at 00:17
  • @user648960, probably there is some authentication token in the form that you submit to paypal, right? An api key or some such thing that you request from them? – muirbot Mar 08 '11 at 00:24
  • Thanks for your help so far! There is a user ID that is sent with the form. However, I want all of the info to be built on the server in a data object before I post it to the paypal site. So can I put that data string into a form element and post it *manually*? I dont want to have to parse the returned data and build form elements. – user648960 Mar 08 '11 at 02:50
  • @user648960, Are you actually trying to implement paypal, or just something like it? – muirbot Mar 08 '11 at 18:57