CODEWITHSUNDEEP
phpjqueryajax
scifi
scifi

Reputation: 23

Display HTML from other site

I have a php script on site1.com that returns HTML. Let's say it http://site1.com/script.php and returns:

<div id="test"><img src="path"/></div>

I want to recieve and show that HTML on site2.com

AJAX. jQuery.

$.ajaxSetup({
    crossDomain: true,
    dataType: "jsonp text html" //like documentation said
});
$.get("http://site1.com/script.php", { param: param}, function(data)    {$("#some_id").html(data);})

And i recieve error:

Uncaught SyntaxError: Unexpected token < in http://site1.com/script.php line 1

I tried lot of dataTypes. Nothing works. How to make it works?

I can't use any php scripts on site2.com

Upvotes: 0

Views: 136

Answers (4)

verve
verve

Reputation: 785

JSONP stands for "JSON with padding." The padding here is a function call: JSONP passes JSON data from one domain as a parameter to a callback function that can then be executed as a script at another domain. You should set up the PHP script at site1.com so it accommodates a callback in the query string -- that is, a GET request for http://site1.com/script.php?callback=foo should return:

foo (
  { 'add_me' : '<div id="test"><img src="path"/></div>' }
)

. Then you can use jQuery's $.get() in a script at site2.com like so:

$.get('http://site1.com/script.php', function(data) {
  $(body).prepend(data['add_me']);
  alert('Load was performed.');
});

Right now, the browser's trying to execute <div id="test"><img src="path"/></div> (or whatever) as a script and chokes on the '<'.

Read more about the same-origin policy (SOP) that's complicating your life: http://en.wikipedia.org/wiki/Same_origin_policy . Learn about JSONP: http://www.ibm.com/developerworks/library/wa-aj-jsonp1/ . Learn some SOP workarounds: http://www.ibm.com/developerworks/web/library/wa-crossdomaincomm/index.html?ca=drs- . Implement a more modern, less cumbersome solution than the one I describe above: http://hacks.mozilla.org/2009/07/cross-site-xmlhttprequest-with-cors/ .

Upvotes: 1

S P
S P

Reputation: 4643

This stuff will ONLY work in case this script runs on "site1.com".

If that's not the case, your one and only alternative is using JSON-P. JQuery has built-in support for JSON-P and jQuery will use it automatically when you call $.getJSON() and paste "?callback=?" to the URL to call.

Upvotes: 0

Quentin
Quentin

Reputation: 944568

From the documentation:

`dataType` String
Default: Intelligent Guess (xml, json, script, or html)

"jsonp text html" is not "xml, json, script, or html"

If you want to get cross-domain data without using CORS, then you have to use JSONP.

If you use JSONP, then the data you are fetching must be expressed in JSONP (which consists of a JavaScript program consisting of a single function call with one argument that is either an object or an array) and not plain HTML.

You are getting an error because you are trying to execute an HTML document as if it was JavaScript.

Upvotes: 2

Tomasz Banasiak
Tomasz Banasiak

Reputation: 1560

You tell jquery to treat data like json. Just delete

 dataType: "jsonp text html" //like documentation said

and should be okay. You have to tell jquery to treat returned data as a html code, not json object.

Upvotes: -1

Related Questions