使用json和php进行jquery自动完成

时间:2012-06-21 20:47:11

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

我正在尝试复制此内容http://jqueryui.com/demos/autocomplete/#remote-jsonp。只是,而不是查询geonames.org服务器,我想查询我自己的。麻烦的是教程没有提到任何关于geonames在他们身上做什么的事情。

我试图抓住它并抓住$ _POST变量,但我想我不明白ajax传递的是什么。 $ _POST ['name_startsWith']不存在,这似乎是传递的。任何人都可以告诉我发送的信息是什么样的?

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

6 个答案:

答案 0 :(得分:2)

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

如果您向自己的服务器发出请求,只需使用Content-Type: application/json的正常请求即可。查看演示远程数据源远程缓存。那些可能更多的是你的盟友。

答案 1 :(得分:2)

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

JSON是一种更好的方法,可以从您自己的服务器获取数据,并且更容易翻译并在所有浏览器中运行。

返回的是相对格式为的项目数组:

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

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

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

编辑:

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

Fruther编辑:

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

这是PHP中的一个例子:

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

字面意思是它在远程服务器端...

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

答案 2 :(得分:1)

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

我看到传递了以下数据:

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

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

答案 3 :(得分:1)

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

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

jsonp非常重要,如果您要从其他主机请求数据而不是您的网页提供的数据。如果您打算拨打自己的服务,可以使用简单的json

答案 4 :(得分:1)

JSON与JSONP

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

从服务器返回的示例JSON

JSON:     {名称:数据}

JSONP:     使用functionName({名称:数据});

何时使用JSONP与JSON

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

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

自动填充插件

关于你的另一个问题,autocomplete插件发送的变量是作为GET变量发送的,所以使用:$ _GET ['name_startsWith']或$ _REQUEST ['name_startsWith']。 (REQUEST将检查GET和POST)。

答案 5 :(得分:1)

很少有基本规则可以帮助您开始编写自己的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请求生成的。