如何在javascript中进行跨域jsonp请求答案

【问题标题】：how to do cross-domain jsonp request in javascript如何在javascript中进行跨域jsonp请求
【发布时间】：2013-10-15 07:51:00
【问题描述】：

我正在编写一些代码示例，但我遇到了一些问题来做我想做的事。

这里是一个代码示例。我在网上找到了它的一部分并尝试使用它。

在上面的例子中它工作得很好，但是当目标 URL 不一样时它就没有了

在第一个示例中，目标提供 json。在第二个示例中，目标提供 jsonp。

不同之处在于，对于第二个示例，我将 json 设置为“真”值。我真的不明白为什么它不起作用。

如果有人可以向我解释这个原因'我尝试了很多我在互联网上找到的东西，但没有任何效果。

非常感谢那些愿意花一些时间来解决我的问题并帮助我找出问题所在的人；）

样本 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 跨域的工作示例，请参见：stackoverflow.com/questions/2681466/jsonp-with-jquery
jQuery162063… 在那个 URL 中做了什么？
@Bergi：这是来自其他人的 JSONP 请求的实际回调名称。
是的，正是 SLaks。但是当我尝试通过输入我的 URL 来调整它时它不起作用..

标签： javascript html json cross-domain jsonp

【解决方案1】：

这是一个jsonp跨域的工作示例

jsonp with jquery

这就是你要找的吗？

如果您使用查询字符串请求

 ?callback=my_callback_method

那么，您的服务器必须响应这样包装的数据：

my_callback_method({your json serialized data});

见：Make cross-domain ajax JSONP request with jQuery

如果你的 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>

【讨论】：

我认为是的，但是当我输入我的 URL 而不是之前的 URL 时，我在 Chrome 的控制台中得到了这个“Uncaught ReferenceError: jQuery16206304910685867071_1380876031038 is not defined”
我在我的回答中添加了来自stackoverflow.com/questions/11736431/…的信息。
我阅读了您的解释并理解了，但我没有看到它在我的代码中真正发生了什么变化.. 我的意思是，如果我请求回调，服务器将使用包含 json 的回调来回答，但我看不出我需要改变什么才能让它工作..顺便谢谢你的回答
使用这个 url: url:"widget.mondialrelay.com//parcelshop-picker/v3_0/services/…?"，然后在 chrome 中查看控制台，看到现在在 json 响应中的新错误。
现在我得到这个：“Uncaught SyntaxError: Unexpected token ?”

【解决方案2】：

你需要告诉 jQuery 把 JSONP 回调名称放在哪里。

将 URL 参数更改为&method=?。

【讨论】：