jquery - 使用 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'(T in dataType 必须大写)，所以 jQuery 根本不会尝试执行 JSON-P 调用，它会尝试 XHR。

3. 您在问题中说过 PHP 页面位于 http://localhost:8080/getData.php，但是您的 url我给定的 jQuery 是 http://localhost/getData.php(没有端口)。