JQuery AJAX 调用返回 JSONP 但无法访问 JSON 数据答案

【问题标题】：JQuery AJAX call returns JSONP but can't access JSON dataJQuery AJAX 调用返回 JSONP 但无法访问 JSON 数据
【发布时间】：2015-02-03 00:02:09
【问题描述】：

我想处理 JSONP 请求中返回的数据，但是我很难进行调用。为什么下面的代码会失败？

HTML 文件：

<!DOCTYPE html>
<html>
    <head>
        <title>Simple JSONP Test</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script src="lib/jquery.js"></script>
    </head>
    <body>
        <div>Simple JSONP Test</div>
        <script>
            // alert('start');

            $.ajax({
            contentType: "application/json; charset=utf-8",
            url: "http://www.myserver.com/simplejsontest.php",
            dataType: "jsonp",
            success: function (data, textStatus, jqXHR) { 
                alert('Success! data: ' + data);
            },
            error: function (xr, msg, e) { alert('Msg: ' + msg + ', error: ' + e + 'xr: ' + xr.toString()); }
        });

        </script>
    </body>
</html>

和php文件simplejsontest.php：

<?php

$myData = array(
//array(
    "id" => "1",
"Title" => "Dr.", 
"firstName" => "John", 
"lastName" => "King"); 
/*,
array(
    "id" => 2,
"Title" => "Dr.", 
"firstName" => "John", 
"lastName" => "King")
);
*/

//echo $_GET['callback']."(".'{"users":'.json_encode($myData).'})';
echo $_GET['callback']."(". json_encode($myData). ')';
?>

【问题讨论】：

请解释一下“无法访问JSON数据”是什么意思；你收到错误消息了吗？
$_GET['callback'] 的值是多少？另外，Ajax 调用的结果是什么？成功还是错误？
contentType: "application/json; charset=utf-8", — 您正在发出 GET 请求，没有请求正文来描述其内容类型。
定义“不工作”。查看浏览器的开发者工具。查看 JavaScript 控制台。它是否报告任何错误？查看“网络”选项卡。是否正在提出请求？它得到回应了吗？它们是否包含您期望的数据？
我复制/粘贴了你的代码，它运行没有错误。

标签： php jquery ajax jsonp

【解决方案1】：

我想我应该更具体一些。我认为他遇到的问题是从对他可以在他的页面上使用的东西的响应中获取数据。

我已经对此进行了测试，并且可以正常工作。

我使用“lastName”，因为这是上面 PHP 中 $myData 数组中的一个元素。由于您在 javascript 中使用了变量“data”，因此您添加了您在 php 数组中定义的元素“lastName”：

alert("last name: " + data.lastName);

如果您想为对象中的每个元素返回多个结果，您将使用多维数组并在响应返回到 javascript 时创建某种计数器。

PHP：

$myData = array(
    "id" => array(
        0 => 1,
        1 => 2
    ),
    "title" => array(
        0 => "Mr.",
        1 => "Dr."
    ),
    "firstName" => array(
        0 => "John",
        1 => "Sara"
    ),
    "lastName" => array(
        0 => "King",
        1 => "Jones"
    )
);

echo $_GET['callback']."(". json_encode($myData). ')';

这是循环返回结果的 jquery/javascript。对于这个例子，我只是将姓氏附加到 html 的正文中：

success: function (data, textStatus, jqXHR) {
    var i = 0;
    do{
        $('body').append(data.lastName[i++]);

    }
    while(i < data.id.length);
},

【讨论】：

这是 JSONP。它通过将响应加载为<script> 来“解析”。
@Quentin 我已经编辑了我的回复以扩展。我认为他的警报给了他类似 [Object] 的东西，他不知道该怎么处理。
为什么建议使用这种数据结构而不是 $myData = array( array( "id" => "1", "Title" => "Dr.", "firstName" => "John ", "lastName" => "King"), array("id" => 2, "Title" => "Dr.", "firstName" => "John", "lastName" => "King") ) ;成功：函数（数据，textStatus，jqXHR）{ var i = 0; do{ $('body').append(i + ">" + data[i++].lastName); } while(i
这种结构没有特别的原因。这只是我过去使用的一个。

【解决方案2】：

我认为您必须使用 json_encode 函数对所有数据进行编码。像这样：

json_encode($myData)

或者

json_encode($_GET['callback']."(". $myData. ')');

【讨论】：

没有。如果您不包含callback，则它不是 JSONP。如果你对整个内容进行编码，你最终会得到一个字符串，而且它也不是 JSONP。