php - jQuery令牌输入不处理跨域结果

Question

我正在创建一个 chrome 扩展，它使用http://loopj.com/jquery-tokeninput/添加令牌，请参阅上一个问题。

我对如何从我的服务器获取结果以由 tokenInput 处理感到困惑。下面的文章，什么是 JSONP？，建议我需要添加一个回调查询参数以使跨域 jsonp 工作：

$(function() {
  $("#token").tokenInput("http://localhost/token/search?callback=jsonprocess", {
    preventDuplicates: true,
    crossDomain: true,
  });
});

这用于将响应包装在我的 php 代码中：

header('Content-type: text/javascript');
echo $this->request->query('callback') . '(' . json_encode($token_array) . ')';
exit;

jsonprocess()然后在我的javascript中调用该方法。但是，这超出了 tokenInput 实例的上下文，因此我无法填充结果。这是正确的功能吗？或者有没有办法让jQuery tokeninput 插件直接处理jsonp？

tokeninput 中的成功回调：

ajax_params.success = function(results) {
    cache.add(cache_key, $(input).data("settings").jsonContainer ? results[$(input).data("settings").jsonContainer] : results);
    if($.isFunction($(input).data("settings").onResult)) {
        results = $(input).data("settings").onResult.call(hidden_input, results);
    }
};

...从未被调用。

Answer 1

伙计，您需要像这样在 javascript 和 php 中进行回调：

javascript:

script.php?callback=?&your_parametars_here

并在 php

echo $_GET['callback'].$your_data_here

Answer 2

比我想象的要容易；不需要?callback=jsonprocess在搜索网址中

$(function() {
  $("#token").tokenInput("http://localhost/token/search", {
    preventDuplicates: true,
    crossDomain: true,
  });
});

Answer 3

正如您在jQuery Tokeninput 文档中看到的，如果您希望它是一个 jsonp 请求，则必须在选项中crossDomain设置。true

$(function() {
  $("#token").tokenInput("http://localhost/token/search?callback=jsonprocess", {
    preventDuplicates: true,
    crossDomain: true
  });
});

并且正确的JSON 内容类型是application/json.

header('Content-type: application/json');

更新：

好的，如果它不能与 jsonp 一起使用，你应该通过启用 CORS来尝试它。

在这里你会做什么，

$(function() {
  $("#token").tokenInput("http://localhost/token/search?callback=jsonprocess", {
    preventDuplicates: true,
    crossDomain: false, //it's also false as default.
  });
});

在 PHP 中，您必须启用 CORS，并且您不需要将结果带入回调函数。您将只转储 JSON。

header("Access-Control-Allow-Origin: *");
header('Content-type: text/javascript');
echo json_encode($token_array);
exit;