简体   繁体   English

如何在JavaScript中进行跨域jsonp请求

[英]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 在上面的情况下,它可以正常工作,但是当目标URL不相同时,

in the first example, the target provide json. 在第一个示例中,目标提供json。 in the second example, the target provide jsonp. 在第二个示例中,目标提供jsonp。

the difference is that for the second example i set the json to the 'true' value. 区别在于,对于第二个示例,我将json设置为“ true”值。 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: 范例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: 范例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>

You need to tell jQuery where to put the JSONP callback name. 您需要告诉jQuery将JSONP回调名称放在何处。

Change the URL parameter to &method=? 将URL参数更改为&method=? .

Here is a working example of jsonp cross domain 这是jsonp跨域的工作示例

jsonp with jquery JSONP与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 请参阅: 使用jQuery进行跨域ajax JSONP请求

Hopefully this will work if your json is fine. 希望这可以在您的json正常的情况下使用。

<!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>

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM