如何在javascript中执行跨域jsonp请求 [英] how to do cross-domain jsonp request in javascript

查看:82
本文介绍了如何在javascript中执行跨域jsonp请求的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在处理一些代码示例,但是在执行所需的操作时遇到了一些问题.

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.

在上面的情况下,它可以正常工作,但是当目标URL不相同时,它确实会显示

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

在第一个示例中,目标提供json. 在第二个示例中,目标提供jsonp.

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

区别在于,对于第二个示例,我将json设置为"true"值. 我真的不明白为什么它不起作用.

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 ;)

示例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>

示例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>

推荐答案

这是jsonp跨域的有效示例

Here is a working example of jsonp cross domain

带jquery的jsonp

您正在寻找什么吗?

如果您请求查询字符串

 ?callback=my_callback_method

然后,您的服务器必须响应包装如下的数据:

then, your server must response data wrapped like this:

my_callback_method({your json serialized data});

请参阅:使用jQuery进行跨域ajax JSONP请求

如果您的json没问题,希望这可以工作.

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>

这篇关于如何在javascript中执行跨域jsonp请求的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆