如何在 JavaScript 中执行跨域 JSON 请求

how to do cross-domain jsonp request in javascript

本文关键字：JSON 请求 执行 JavaScript      更新时间：2023-09-26

我正在处理一些代码示例，但是在做我想做的事情时遇到了一些问题。

下面是一个代码示例。 我在互联网上找到了其中的一部分并尝试使用它。

在上面的情况下，它可以完美运行，但是当目标URL不同时，它确实如此

在第一个示例中，目标提供 JSON。在第二个示例中，目标提供 JSONP。

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

如果有人能解释我这个原因，我尝试了很多我在互联网上找到的东西，但没有真正奏效。

非常感谢那些会花一些时间解决我的问题并帮助我找出问题所在的人;)

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

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

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

下面是 jsonp 跨域的工作示例

JSONP with jquery

这就是你要找的吗？

如果您已请求查询字符串

 ?callback=my_callback_method

然后，您的服务器必须像这样包装数据：

my_callback_method({your json serialized data});

请参阅： 使用 jQuery 发出跨域 ajax JSONP 请求

如果您的 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>
相关文章：