使用 jsonp 对 localhost php 的 Ajax 请求不起作用

Question

您好，我正在使用 Jquery 来调用 php 脚本。 php 脚本位于http://localhost:8080/getData.php，它访问一个MySql 数据库。

我在我的电脑上使用 Tomcat 服务器设置，服务器地址为 localhost:8080

我查看了 ajax 响应 data.status，它是 0

我已经阅读了有关跨域请求的信息，并且知道如果我使用 JSONp 这应该不是问题。

任何帮助将不胜感激。

我用来调用 ajax 函数的 HTML 中的 jquery 部分如下：

<script type="text/javascript">
$(document).ready(function() {
   $.ajax({
       type:'GET',
       url:'http://localhost/getData.php',
       datatype:'jsonp',
       timeout: 5000,
       success: function(data){
           //data loaded
           alert('loaded');

       },
       error: function(data){
           // error on loading data
           alert('error');        
       }
    });
});
</script>

实际的getData.php代码如下：

<?php
header('Content-type: application/json');

$server = "127.0.0.1";
$username = "root";
$password = "";
$database = "deals";

$con = mysql_connect($server, $username, $password) or die ("Could not connect: " . mysql_error());
mysql_select_db($database, $con);

$sql = "SELECT area_id, name AS area_name, sector AS area_sector FROM deals.areas ORDER BY name";
$result = mysql_query($sql) or die ("Query error: " . mysql_error());

$records = array();

while($row = mysql_fetch_assoc($result)) {
    $records[] = $row;
}

mysql_close($con);

echo $_GET['jsoncallback'] . '(' . json_encode($records) . ');';
?>

Answer 1

我看到三个问题：

1. 您的 PHP 脚本正在寻找一个名为 jsoncallback 的 GET 参数，但这不是 jQuery 默认发送的名称，即 callback。要么将您的 PHP 更改为使用 callback：

   // Here ----v
   echo $_GET['callback'] . '(' . json_encode($records) . ');';
   

   ...或将此选项添加到您的 ajax 调用中，以告诉 jQuery 使用 jsoncallback 代替：

   jsonp: "jsoncallback",
   

   您可以使用浏览器开发工具中的“网络”选项卡来检查调用并查看查询字符串的外观，以确保它们匹配。

2. 您的 ajax 选项中有错字，您使用的是 datatype:'jsonp' 而不是 dataType:'jsonp'（dataType 中的 T 必须是大写的），所以 jQuery 不会一直尝试这样做一个 JSON-P 调用，它会尝试 XHR。

3. 您在问题中说过 PHP 页面位于 http://localhost:8080/getData.php，但您为 jQuery 提供的 url 是 http://localhost/getData.php（没有端口）。