jquery json函数返回null

Question

我有一个如下的 jquery 脚本：

$.ajax({
   type: "GET",
   url: "http://www.site.com/v4/ajax/get_song_info.php",
   data: ({id : song_id }),
   dataType: "json",
   success: function(data)
   {
      alert( "Data: " + data );
   }
 });

以及相关的php页面：

<?php

    include_once '../connect.php';

    $song_id = $_GET['id'];

    $query = mysql_query("SELECT * FROM songs WHERE id = '$song_id' LIMIT 1");

    $song = mysql_fetch_row($query);

    $song_info = array( htmlentities($song[3]) , htmlentities($song[4]) );

    header('Content-Type: application/json');
    echo json_encode($song_info); 
?>

当我在浏览器中单独调用 php 时，它会返回如下内容：["Peaches","I Feel Cream (Proxy Remix)"]

但是，当我调用 jQuery 时，我的警报显示 'Data: null'

Answer 1

我注意到您使用的是绝对 URL 而不是相对 URL。如果您的页面也没有从http://www.site.com 提供，那么您将遇到Same Origin Policy。 SOP是浏览器实现的一种安全机制。

您有几个选项可以解决这个问题。如果您控制服务器并且不需要支持 IE6 或 IE7，则可以实现Cross-Origin Resource Sharing。在大多数现代浏览器中，如果服务器启用了 CORS，您的 ajax 调用将开始工作（浏览器会在后台处理它）。不过，IE6 和 IE7 不支持 CORS，而且 IE8 要求客户端代码做一些特殊的事情。

另一个选项是JSONP，它利用了这样一个事实：虽然你不能进行跨域 ajax 调用（除非你有 CORS），但页面从远程主机加载脚本是完全可以的.因此，您加载脚本，其中包含数据并回叫您让您知道它在那里。 JSONP 的优势在于它现在适用于所有主流浏览器。并且 jQuery 在其ajax 调用中内置了 JSONP 支持。