how to do cross-domain jsonp request in javascript

Question

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>

Here is a working example of jsonp cross domain, See this: stackoverflow.com/questions/2681466/jsonp-with-jquery — user2853830
– user2853830, Commented Oct 8, 2013 at 11:49
@Bergi: It's an actual callback name from someone else's JSONP request. — SLaks
– SLaks, Commented Oct 8, 2013 at 11:52
Yes exactly SLaks. but when i try to adapt it by putting my URL it doesn't work .. — bottus
– bottus, Commented Oct 8, 2013 at 12:20

SLaks · Accepted Answer · 2013-10-08 11:50:12Z

1

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

Change the URL parameter to &method=?.

answered Oct 8, 2013 at 11:50

SLaks

891k182 gold badges1.9k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 11:50:04Z

0

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>

edited May 23, 2017 at 11:50

CommunityBot

11 silver badge

answered Oct 8, 2013 at 11:51

user2853830

6 Comments

bottus Over a year ago

I think yes it is but when i put my URL instead of the one before, i get this in the Chrome's console "Uncaught ReferenceError: jQuery16206304910685867071_1380876031038 is not defined "

user2853830 Over a year ago

I have added information to my answer from: stackoverflow.com/questions/11736431/….

bottus Over a year ago

I read your explanations and understood but i don't see what it really changes in my code .. i mean yes if i request with a callback the server will answer with the callback wrapping the json but i don't see what i do have to change to make it work .. thank you for your answers by the way

user2853830 Over a year ago

use this url: url:"widget.mondialrelay.com//parcelshop-picker/v3_0/services/…?", and then look at the console in chrome, see the new error which is now inside the json response.

bottus Over a year ago

Right now i get this : "Uncaught SyntaxError: Unexpected token ?"

|

Collectives™ on Stack Overflow

how to do cross-domain jsonp request in javascript

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related