带有 Sencha Touch 的 JSONP 不起作用

Posted 2023-02-26

【中文标题】带有 Sencha Touch 的 JSONP 不起作用

【英文标题】：JSONP with Sencha Touch not working

【发布时间】：2011-05-03 12:10:51

【问题描述】：

我正在关注 Sencha Touch 的这个教程：http://www.vimeo.com/15672696 完美的教程，完美无瑕。

但是当我尝试在我自己的项目中重用这段代码时，我没有工作。 这是我所做的：

在我的 Sencha touch 应用程序中，我编写了以下函数：

showContacts = function()

    Ext.util.JSONP.request(
        url: 'http://www.hotcoffee.be/check-relations/index.php/json/contactpersonen',
        callbackKey: "callback",
        params: 
            unique: Math.random()
        ,
        callback: function(data)
        
            var contacts = data.results;
            nameOfPanel.update(contacts);
        
    );

首先，我用 PHP（codeigniter）编写了自己的 JSON 文件：

<?
    $row[] = array(
        "name" => $item->name,
        "first_name" => $item->first_name,
        "avatar"=>$item->avatar
    );

    // PASSING THE ARRAY $row TO A VIEW
    // ON THE VIEW I OUTPUT THE ARRAY

    $this->output->set_content_type('application/json')->set_output(json_encode($row));
?>

（结果：见 showContacts 函数的 URL）

这不起作用，所以我认为使用 PHP 文件作为 JSON 有问题，所以我创建了一个 JSON 文件：

（结果：http://www.hotcoffee.be/check-relations/json/friends.json）

现在看来这也不起作用。我在很多小时内都在为此头疼... 我还在 Chrome 的调试器中收到以下消息：

Resource interpreted as Script but transferred with MIME type application/json. (contactpersonen:-1)
Uncaught SyntaxError: Unexpected token : (contactpersonen:1)
Resource interpreted as Image but transferred with MIME type text/html. (csi:-1)

另一件事是我可以确保面板和 tpl 写得很好，因为使用硬编码的测试数据它确实有效。只有加载 JSON 文件才是问题所在。

有人知道怎么处理吗？ 非常感谢！

【问题讨论】：

JSONP 通过将 JSON 包装在回调函数中来工作（以便它可以包含在

嗯，现在 JSON 文件在同一个域上，但将来我想从另一个主机获取它。所以我想我想让它从一开始就在另一个域中工作。

【参考方案1】：

这是php服务器的例子：

$callback = $_REQUEST['callback'];

// Create the output object.
$output = array('a' => 'Apple', 'b' => 'Banana');

//start output
if ($callback) 
    header('Content-Type: text/javascript');
    echo $callback . '(' . json_encode($output) . ');';
 else 
    header('Content-Type: application/x-json');
    echo json_encode($output);

当你在chrome或firefox中调试时，你会发现响应加入了Ext.util.JSONP.callback()

这就是 jsonp 如何“从与正在运行的页面的原始域不同的域中的页面检索数据”，并将数据提供给正在运行的页面。

【参考方案2】：

我在这里回答了类似的问题：Sencha seems to not like Rails' json。它是特定于 Rails 的，但这个概念仍然适用。

基本上詹姆斯皮尔斯是正确的。您返回的内容需要包装在标签和回调函数中。这将在您的页面上插入代码并运行脚本，该脚本具有调用您提供的功能的效果。

$response = "<script type='text/javascript'>";
$response .= $_GET['callback'] . "(" . json_encode($row) . ")";
$response .= "</script>";
$this->output->set_content_type('application/json')->set_output($response);

【讨论】：

感谢 James Pearce 和 misagrooves！两者都是正确的，我通过 James Pearce 的信息找到了解决方案。

FWIW，出于某种原因，这仅在我删除 <script type='text/javascript'> 和 </script> 时才对我有效——即，不要使用上面的第一行和第三行