跨域 jQuery .AJAX 问题

Posted 2023-02-27

【中文标题】跨域 jQuery .AJAX 问题

【英文标题】：Cross Domain jQuery .AJAX problems

【发布时间】：2011-11-06 09:16:31

【问题描述】：

我正在尝试使用 jQuery 的 .AJAX 函数向 IPINFODB 的 API 发送请求，以获取访问我们网站的用户的地理位置。

问题是，据我所知，jQuery 的 .AJAX 函数不允许跨域请求，反过来，什么也不返回。

以下代码提示 [空白]

$.ajax(
    type: "POST",
    url: "http://api.ipinfodb.com/v3/ip-city/ip_query.php",
    data: "key=***********&format=json&ip=<?php echo $_SERVER['REMOTE_ADDR']; ?>",
    success: function(r) 

        alert(r);

    
);

我已经尝试了 .AJAX 请求的所有参数变体，例如 GET、JSON、等等等等，但仍然没有。有谁知道通过 AJAX 向这个 API 发出请求的另一种方式？最好不要使用 YQL。

【问题讨论】：

:) 5 个答案，没有赞成票，也没有标记正确答案...

【参考方案1】：

这可以通过 AJAX 来完成。您将需要使用 JSONP 来解决跨域问题。

代码如下：

$.getJSON("http://api.ipinfodb.com/v3/ip-city/?key=API_KEY&format=json&callback=?" )
 .error (function  () 
    // error code
 ) 
 .success(function (result)  
    // success code
    console.log(result); 
    console.log("your location is", result.latitude, result.longitude);
 );

您需要将 API_KEY 替换为您自己的 API 密钥。

【参考方案2】：

我最近实现了一个 WordPress 插件。

这是我的 AJAX 调用的样子：

jQuery.ajax(
type : "GET",
url : "action.php",
data :     
    ipinfodb_api_key : "<?php echo $ipinfodb_api_key; ?>",
    ip : "<?php echo $_SERVER['REMOTE_ADDR']?>",
        success : function(response) 
            jQuery("#<?php echo $widgetid; ?>").html(response);
    
);

这是我在 action.php 中处理此信息的函数：

function processData($ipinfodb_api_key, $ip) 
$longitude = null;
$latitude = null;
$url = 'http://api.ipinfodb.com/v2/ip_query.php?key='.$ipinfodb_api_key.'&ip='.$ip.'&timezone=false';
$content = @file_get_contents($url);
if ($content != FALSE) 
    $xml = new SimpleXmlElement($content);
    if ($xml->Latitude) $latitude = $xml->Latitude;
    if ($xml->Longitude) $longitude = $xml->Longitude;

    // return latitude or longitude or do further processing

【参考方案3】：

如果远程服务器不支持 JSONP，由于same origin policy 的限制，您不能直接从 javascript 调用它（当然，除非您编写自己的浏览器和不遵守此政策的 javascript 实现）。

要解决此限制，您可以在您的域上编写一个服务器端脚本，作为您的域和远程域 (api.ipinfodb.com) 之间的桥梁，然后将 AJAX 请求发送到您自己的服务器端脚本。

【讨论】：

好的，谢谢，我刚刚快速查看了一下，并尝试使用服务器端脚本路由。好建议！

幸运的是它确实支持 JSONP，但 URL 不同。

【参考方案4】：

试试这个网址：

http://api.ipinfodb.com/v3/ip-city/?key=<your_api_key>&format=json&callback=?

...并通过 GET 发送请求（将数据留空）

http://ipinfodb.com/ip_location_api_json.php

【参考方案5】：

您可以在您的 Web 应用程序中编写一个 Web 方法，该方法从您的服务器执行 Web 请求。本质上，您将调用与另一个函数包装起来，然后您可以调用您的函数，因为它是相同的来源。