Retrieve html across domains using jQuery and JSONP

Question

I have a form that outputs one simple line of html <a href="link">A LINK</a>

I can access the process directly with data appended to the url like http://site.com/form.asp?sample=100

Because this is going across domains (to a subdomain) I am trying to do this using JSONP. I first tried it with datatype json but I was still getting a 403 forbidden. Here is what I am trying with JSONP but this is all kinds of messed up and returns an error with this %5Bobject%20Object%5D" appended to it. I guess it is a problem with how I am trying to append the data to the url ?

$j.getJSON({
        type: 'POST',
        url: 'http://site.com/form.asp',
        data: 'order=' + ordervalue,
        contentType: "application/json; charset=utf-8",
        dataType: "jsonp",
        success: function(response) {
            alert(response);
        }
    });

Answer 1

JSONP doesn't work like this, you're not sending JSON at all, you're sending HTML.

JSONP is strictly a GET request (made by creating a <script> tag), you cannot POST cross-domain and get the result back...it just doesn't work that way. The way JSONP works is it basically adds this to your page:

<script type="text/javascript" src="http://site.com/form.asp?order=something&callback=myFunc"></script>

....that response has to be valid JavaScript, typically it looks like:

myFunc({ "key": "value"...data, etc... });

It doesn't work for fetching HTML, it just throws a syntax error, this limitation is very intentional, and part of the security blocks in place (part of the same origin policy).

Answer 2

You can still post/get cross domain on the client:

flyJSONP/YQL
jankyPOST/postMessage/contentWindow
CORS