CODEWITHSUNDEEP
javascripthtmljsoncross-domainjsonp
bottus
bottus

Reputation: 903

how to do cross-domain jsonp request in javascript

i'm working on a little sample of code but i'm getting some problem to do what i want.

here is a sample of code. i found part of it on internet and tryed to use it.

in the case just above it works perfectly but when the target URL is not the same it doesent

in the first example, the target provide json. in the second example, the target provide jsonp.

the difference is that for the second example i set the json to the 'true' value. i don't really understand why it doesn't work.

if someone could explain me that cause' i tried plenty of things that i found on internet but nothing really worked.

thanks so much for those who will take some time on my problem and help me to figure out what's wrong ;)

sample 1:

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>Test</h1>
<script>
$.ajax({
type: 'GET',
dataType: "json",
processData: false,
crossDomain: true,
jsonp: false,
url: "http://flxn.eu/json.php",
success: function (responseData, textStatus, jqXHR) 
{
    console.debug(responseData);
    $.each(responseData, function (index, value) {
            console.debug(value);
            $('body').append(value.name + '<br />' + value.address + '<br />' + value.city + '<br />' + value.postcode + '<br />' + '<br />');
        });
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});
</script>
</body>
</html>

sample 2:

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>test jsonP</h1>
<script>
$.ajax({
type: 'GET',
dataType: "json",
processData: false,
crossDomain: true,
jsonp: true,
url: "http://widget.mondialrelay.com//parcelshop-picker/v3_0/services/parcelshop-picker.svc/SearchPR?Brand=BDTEST%20%20&Country=FR&PostCode=62620&ColLivMod=24R&Weight=&NbResults=7&SearchDelay=&SearchFar=75&=Zone_Widget&VacationBefore=&VacationAfter=&Service=&Latitude=&Longitude=&method=jQuery16206304910685867071_1380876031038&_=1380879686732",
success: function (responseData, textStatus, jqXHR) 
{
    console.debug(responseData);
},
error: function (responseData, textStatus, errorThrown) {
    alert('POST failed.');
}
});
</script>
</body>
</html>

Upvotes: 0

Views: 6193

Answers (2)

user2853830
user2853830

Reputation:

Here is a working example of jsonp cross domain

jsonp with jquery

Is that what you are looking for?

If you have requested with query string

 ?callback=my_callback_method

then, your server must response data wrapped like this:

my_callback_method({your json serialized data});

see: Make cross-domain ajax JSONP request with jQuery

Hopefully this will work if your json is fine.

<!doctype html>
<html>
<head>
<title>JSONP example</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
</head>
<body>
<h1>test jsonP</h1>
<script>
var url = 'http://widget.mondialrelay.com//parcelshop-picker/v3_0/services/parcelshop-picker.svc/SearchPR?Brand=BDTEST%20%20&Country=FR&PostCode=62620&ColLivMod=24R&Weight=&NbResults=7&SearchDelay=&SearchFar=75&=Zone_Widget&VacationBefore=&VacationAfter=&Service=&Latitude=&Longitude=&method=jQuery16206304910685867071_1380876031038&_=1380879686732?callback=?';
$.ajax({
   type: 'GET',
    url: url,
    async: false,
    jsonpCallback: 'jQuery16206304910685867071_1380876031038',
    contentType: "application/json",
    dataType: 'jsonp',
    success: function(json) {
       console.dir(json.PRList);
    },
    error: function(e) {
       console.log(e.message);
    }
});
</script>
</body>
</html>

Upvotes: 0

SLaks
SLaks

Reputation: 887245

You need to tell jQuery where to put the JSONP callback name.

Change the URL parameter to &method=?.

Upvotes: 1

Related Questions