JSONP 回调返回错误

Question

我正在尝试学习 JSONP。根据我的在线研究，我了解到它是带有回调的调用函数。除此之外，其他一切（处理数据的方式/数据格式）类似于 JSON？

我只是在玩 JSONP，如下所示。但它返回错误，请详细说明，请..

Script.js

function test(){
jQuery.ajax({
  url: "/plugins/system/chat/jsonstr.php",
  dataType: "jsonp",
  jsonpCallback: "logResults"
});

jsonstr.php

logResults(){
    $arr = '[{
        "title": "keren",
        "picture": "http://something.png",
        "id":1
    }, {
        "title": "diana",
        "picture": "/plugins/system/conversekit/conversekit/images/avatar.png",
        "id": 2
    }]';
    echo $arr;
}

我希望此调用返回 json 对象，以便我可以在测试的成功函数中对其进行操作。但是会抛出如下错误：

<br />
<b>Parse error</b>:  syntax error, unexpected '{' in <b>C:\projects\easysocial.com\plugins\system\conversekit
\jsonstr.php</b> on line <b>14</b><br />

控制台中的url是这样的：

GET http://mysite.localhost.com/plugins/system/chat/jsonstr.php?callback=logResults

Answer 1

logResults() 是 JavaScript 回调，而不是 PHP 函数。 jsonstr.php 应该只返回有效的 JSON。

所以 jsonstr.php 应该是这样的

<?php

 $arr = [
            [
                'title' => "keren",
                'picture' => "http://something.png",
                'id' => 1,
            ],
            [
                'title' => "diana",
                'picture' => "/plugins/system/conversekit/conversekit/images/avatar.png",
                'id' => 2,
            ],
        ];

echo(json_encode($arr));

还有 Script.js

function logResults() {
    console.log('ajax done');
}

function test(){
    jQuery.ajax({
      url: "/plugins/system/chat/jsonstr.php",
      dataType: "jsonp",
      jsonpCallback: logResults
    });
}

Answer 2

两个问题：

1. 您的服务器端脚本不会返回任何内容，您的浏览器开发者工具中的 Net 窗格应该会显示。

2. JSONP 只是在 AJAX 中避免跨站点权限问题的一个肮脏技巧，而不是让 PHP 代码与 JavaScript 交互的方法（这是不可能的）。所以当你说“我想要一个名为 logResults 的回调函数”时，你的意思是一个 JavaScript 函数。

如果你想使用 JSONP 你需要：

1. 让你的服务器真正返回 JSONP（甚至不是 JSON）：

   $callback = filter_INPUT(INPUT_GET, 'callback');
   // ...
   echo sprintf('%s(%s);', $callback, $json);
   

2. 定义一个JavaScript函数来处理返回的数据：

   function logResults (data) {
       alert(data[0].title);
   }
   

这样你基本上得到一个动态生成的旧<script>标签，它加载一个简单的脚本：

logResults([{
        "title": "keren",
        "picture": "http://something.png",
        "id":1
    }, {
        "title": "diana",
        "picture": "/plugins/system/conversekit/conversekit/images/avatar.png",
        "id": 2
    }]);

但是由于您是在自己的域中进行 AJAX 调用：

url: "/plugins/system/chat/jsonstr.php",
     ^^
      No "http://example.com/` prefix pointing to a third-party site

...你根本不需要 JSONP：纯 JSON 就足够了。