【问题标题】:jquery autocomplete with json and php带有 json 和 php 的 jquery 自动完成
【发布时间】:2012-06-21 20:47:11
【问题描述】:

我正在尝试复制这个,http://jqueryui.com/demos/autocomplete/#remote-jsonp。只是,我不想查询 geonames.org 服务器,而是查询我自己的服务器。麻烦的是,该教程没有提及 geonames 到底在做什么。

我尝试使用它并获取 $_POST 变量,但我想我不明白 ajax 传递的是什么。 $_POST['name_startsWith'] 不存在,这似乎正在传递。谁能告诉我发送的信息是什么样的?

此外,本教程是关于 jsonp,而不是 json。这有多重要?

【问题讨论】:

    标签: php ajax json jquery-ui jquery-ui-autocomplete


    【解决方案1】:

    JSONP 与 JSON 完全不同。正如其他人所说,JSONP 是一个跨服务器。

    JSON 是从您自己的服务器获取数据的更好方法,并且更容易在所有浏览器中进行翻译和工作。

    返回的是一个相对格式下的item数组:

    [{label: '', description: ''}, { //etc }]
    

    标签用作显示名称,除非您像 ID 一样带回额外数据,否则它将是用于在自动完成中选择项目的唯一数据。

    使用诸如select 之类的函数,您可以获取ui.item.id(id 将与上面定义的数组一起返回)并使用它从列表中选择唯一的项目以执行进一步的AJAX 函数。

    编辑:

    要使用传递支持的变量来更改菜单的显示,您需要编写自己的 displayMenuItem 函数来利用上面定义的数组中的变量。

    进一步编辑:

    他们实际上这样做的方式是双向的。远程服务器只是传回一个回显的 JSON 格式数组,就像上面定义的那样,没有别的(除了标题)。之后,JQuery 只是对数组进行排序并填充数据。

    所以在 PHP 中这样做的一个例子:

    echo json_encode(array('name' => 'whoop'));
    

    从字面上看,这就是远程服务器端...

    再次编辑我忘记了用 JSONP 发送的回调

    【讨论】:

      【解决方案2】:

      jsonp 仅用于对外部服务器的请求(跨源)。返回的是来自该调用的 JSON 对象。

      如果您向自己的服务器发出请求,只需使用带有Content-Type: application/json 的普通请求即可。查看演示 remote datasourceremote with caching。这些可能更适合你的盟友。

      【讨论】:

      • 它实际上是一个phonegap应用程序。我认为这将使其符合交叉起源的条件。我希望我可以使用其他教程。他们更有意义。感谢您的回复!
      【解决方案3】:

      使用 Firefox 和一个名为 Firebug 的插件。 使用“网络”视图面板。

      我看到以下数据正在传递:

      _            1340311947284
      callback    jQuery17206118978844942496_1340311935530
      featureClass    P
      maxRows 12
      name_startsWith atlanta
      style   full
      

      请求的 URL 是 this one。在那里你可以看到 JSON 是如何形成的。

      【讨论】:

        【解决方案4】:

        JSON 与 JSONP

        JSON 和 JSONP 的区别在于 JSON 如何从服务器返回。和 常规 JSON,服务器以其标准响应格式返回纯 JSON。使用 JSONP,服务器返回一个 javascript 文档,其中包含一个函数调用,其中 JSON 数据传递给您发送给服务器的函数名称。

        从服务器返回的 JSON 示例

        JSON: {名称:数据}

        JSONP: 函数名({name:data});

        何时使用 JSONP 与 JSON

        使用 JSONP 从 www.name.com 查询 www.other.com。

        使用常规 JSON 从 www.name.com 到 www.name.com 进行查询。

        自动完成插件

        关于您的其他问题,自动完成插件发送的变量作为 GET 变量发送,因此请使用:$_GET['name_startsWith'] 或 $_REQUEST['name_startsWith']。 (REQUEST 会同时检查 GET 和 POST)。

        【讨论】:

          【解决方案5】:

          这可能是您正在寻找的地理名称的文档:http://www.geonames.org/export/geonames-search.html

          如果您尝试其中一个示例链接,您应该会看到geonames 元素的列表。每一个都包含以下属性:nameadminName1countryName,这就是本示例中显示的内容。

          jsonp 如果您从另一台主机请求数据而不是提供您的页面的主机,这很重要。如果你打算调用自己的服务,可以使用简单的json

          【讨论】:

            【解决方案6】:

            帮助您开始编写自己的 JSON 服务的一些基本规则:

            • 如果您希望其他网站能够使用您的数据,那么您需要实现 JSONP;否则 JSONP/JSON 都可以使用。 JSONP 机制规避了same origin policy 的问题。

            • 如果您希望其他网站能够使用您的数据,那么您的脚本应该通过查询字符串接受参数;查询字符串和表单变量都可以另外使用。

            • 对于 JSON 请求,您的服务器需要发出 JSON 编码的数据。数据必须使用内容类型application/json 发送。示例 PHP 代码:

            header("Content-type: application/json");
            echo json_encode(array("foo" => "bar"));
            // {"foo":"bar"}
            
            • 对于 JSONP 请求,您的服务器需要发出封装在 JavaScript 函数调用和内容类型 text/javascript 中的 JSON 数据。示例 PHP 代码:
            header("Content-type: text/javascript");
            echo "callback(";
            echo json_encode(array("foo" => "bar"));
            echo ");";
            // callback({"foo":"bar"});
            
            • 您通常从 GET/POST 变量中获取回调函数的名称,而不是硬编码。

            • 在实践中,JSONP 请求是使用<script src> 标签生成的;而 JSON 请求是使用 XML HTTP 请求发出的。

            【讨论】:

              猜你喜欢
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              • 2012-08-04
              • 2010-12-08
              • 2011-04-10
              • 1970-01-01
              • 1970-01-01
              • 1970-01-01
              相关资源
              最近更新 更多