【问题标题】:Autocomplete Jquery dataSource with JSON使用 JSON 自动完成 Jquery 数据源
【发布时间】:2013-07-11 07:01:42
【问题描述】:

我正在使用 JQuery 的自动完成小部件,使用 JSON 来解析数据库信息,但不起作用。有很多像我这样的问题,但我一直无法找到解决方案。我解析 JSON 的 php 文件是这样的:

此错误出现在浏览器控制台中,在 php 的第一行中:

Uncaught SyntaxError: Unexpected token <

php文件peliculas.php

<?php

    function makeSqlConnection()
    {
        $SERVIDOR_MYSQL = "localhost";
        $BASE_DATOS = "db";
        $USUARIO_MYSQL = "root";
        $PASSWORD_MYSQL = "";

        $con = mysql_connect($SERVIDOR_MYSQL,$USUARIO_MYSQL,$PASSWORD_MYSQL) or die(mysql_error()); 
        mysql_select_db($BASE_DATOS,$con) or die(mysql_error());
        return $con;
    }

    function disconnectSqlConnection($con)
    {
        mysql_close($con);
    }

    $con = makeSqlConnection();

    $term = trim(strip_tags($_GET['term']));
    $result = mysql_query("SELECT PYS_STR, PYS_TITULO FROM pys WHERE PYS_STR LIKE '%".$term."%';", $con);

    $informacion = array();

    while($row = mysql_fetch_assoc($result))
    {
        array_push($informacion, array('label' => $row['PYS_TITULO'], 'value' => $row['PYS_STR']));
    }

    echo json_encode($informacion);
?>

JSON 返回: [{"label":"Reservoir Dogs","value":"reservoirdogs"},{"label":"Machete","value":"machete"},{"label":"Wall Street","value":"wallstreet"},{"label":"Django Desencadenado","value":"djangodesencadenado"},{"label":"The Wire","value":"thewire"},{"label":"This Is England '88","value":"thisisengland88"}]

这是我的脚本:

$(function() {    
        $( "#peliculas" ).autocomplete({
            source: function( request, response ) {
                $.ajax({
                    url: "/bundles/pys/php/peliculas.php",
                    dataType: "json",
                    data: {terms: request.term},
                    success: function( data ) {
                        response( $.map( data, function( item ) {
                            return {
                                label: item.label,
                                value: item.value
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function( event, ui ) {
                log( ui.item ?
                    "Selected: " + ui.item.label :
                    "Nothing selected, input was " + this.value);
            },
            open: function() {
                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
            },
            close: function() {
                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
            }
        });
    });

这是我的html代码:

<div class="ui-widget">
  <label for="peliculas">Peliculas: </label>
  <input id="peliculas" />
</div>

<div class="ui-widget" style="margin-top: 2em; font-family: Arial;">
  Result:
  <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
</div>

解决方案

我已经解决了这个错误。问题出在peliculas.php的位置; Symfony2 在/resource/public/js 目录中检测到这个 php 文件,如 js 文件。当我将 php 文件更改为新目录并更新脚本中的 url 参数后,它运行良好。

第二个问题出在data参数中:

data: {terms: request.term}, 当我用term 替换terms 时,过滤工作正常。

【问题讨论】:

  • “不起作用”是什么意思。页面有错误吗?
  • @AndrewWhitaker JSON 返回正常,JS 与 JQuery 自动完成示例非常相似。当我写入标签时没有出现任何内容。我不知道出了什么问题,可能在$.ajax(... 中,或者 PHP 中可能缺少某些东西...谢谢!!!

标签: ajax json jquery autocomplete


【解决方案1】:

要检查两件事:

1) 请检查您的编辑器是否会自动在您的文件中插入 Unicode 签名 (BOM)。 http://www.w3.org/International/questions/qa-byte-order-mark#detect

您的 php 文件 peliculas.php 的开头可能有一个 BOM(字节顺序标记)字符,这会导致输出出现问题。

如果您找不到删除 BOM 的设置,请快速解决此问题: 复制 - 将你的php文件的所有内容粘贴到notepad++中的一个空文件中,并将文件保存为UTF-8(notepad++不写BOM)

2) 在 json_encode 之前添加 application/json 标头

header('Content-Type: application/json');
echo json_encode($informacion);

【讨论】:

  • 谢谢你的回答,我已经按照你说的做了,但是还是出现了同样的错误。 :(
【解决方案2】:

似乎没有按预期工作,因为缺少 逗号

label: item.label,
value: item.value

【讨论】:

  • 是的,你是对的,但结果是一样的,当我在文本标签中写入时,什么都没有出现。谢谢回复!!
  • 您能否在控制台中看到任何消息/警告。您可以尝试console.log('label = '+item.label+' value = '+item.value) 并检查AJAXcall 是否正在返回数据
  • 我有这个错误:Uncaught SyntaxError: Unexpected token &lt;在php的第一行;在&lt;?php。它在“peliculas.php”上崩溃,因此无法进入“成功”
  • @benatespina PHP 代码对我来说似乎是正确的。如果您直接在浏览器中调用 PHP 页面,例如 http://&lt;path to file&gt;/peliculas.php,您是否得到相同的 ERROR? ...
  • 我认为您需要将 data: {terms: request.term}, 替换为 data: {term: request.term}, 看看 termsterm 之间的区别
猜你喜欢
  • 2012-07-16
  • 1970-01-01
  • 1970-01-01
  • 2013-01-07
  • 2013-01-22
  • 1970-01-01
  • 1970-01-01
  • 2016-12-29
  • 2011-09-21
相关资源
最近更新 更多