jQuery 自动完成从 Mysql 数据库中拉取

Posted 2023-02-24

【中文标题】jQuery 自动完成从 Mysql 数据库中拉取

【英文标题】：jQuery Autocomplete Pull from Mysql Database

【发布时间】：2012-04-09 09:45:49

【问题描述】：

我要解决的问题： 用户，输入一个邮政编码，如08212，或任何美国邮政编码，jquery UI Autocomplete 调用此源文件：../src/php/registration/getFanLoc.php，该文件根据输入的邮政编码对数据库中的某些字段（如下所述）进行查询.

在 index.php 上有一个表单/jquery：

假设所有的 jquery UI 代码都已经在这个文件中了

<script type="text/javascript">
    $(document).ready(function()
    
        $('input#zip').autocomplete(
            dataType: "json",
            source: "../src/php/registration/getFanLoc.php",
            minLength: 3
        );
    );
</script>

<form method="post" id="FanDetail">
  <div class="ui-widget">
     <label for="zip">Zip: </label>
     <input id="zip" name="zipcode" value="US Zipcode" onFocus="clearText(this)" /><br />
  </div>
</form>

getFanLoc.php 文件 - 查询 mysql 以获取与输入的 5 位邮政编码相对应的任何记录：

     <?php
    try
        ///////////////////////////////////////////////////////////
        $zip = mysql_real_escape_string($_GET['zipcode']); //////
        ///////////////////////////////////////////////////////////
        require_once('../../cfg/dbi.php') or die('Cant require dbi');
        $dbh->setAttribute( PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION );  
        $sth = $dbh->prepare(
        'SELECT fanDetLocID, fanDetLocCity, fanDetLocState FROM fanDetailLocation WHERE fanDetLocZip = ?');
        $sth->bindParam(1, $zip);
        $sth->execute();
    while ($res = $sth->fetch(PDO::FETCH_ASSOC)) 
        foreach($res as $column=>$val) 
            $res[$i][$column] = $val;
        
        $i++;
           
    print json_encode($res);
 


    catch(PDOException $e)
        file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND);  
    



    ?>

我最初遇到问题，因为它没有连接到数据库并且PDODBConnectionErrors.txt 出现错误，但是我从FIXED 那部分开始，现在它什么也没做，但现在没有抛出错误在文件中。有人看到我做错了什么吗？我是使用autocomplete jQuery UI widget 的新手，所以请放轻松:)。

我尝试过的更改：

尝试在上面的 $_GET['zipcode'] 中添加，因为下面的评论者认为这个插件使用了 $_GET 而不是 $_POST 。将其从 $_POST 更改为 $_GET 是正确的，但现在我在尝试直接访问文件时遇到以下问题：

还尝试像getFanLoc.php?zipcode=08039 一样直接访问文件，这似乎至少让我更接近了一点。 *当我从这个 url 访问它时，页面现在声明 *False，这让我认为我的 while() foreach() 循环是错误的。有人用它看起来很强壮吗？

补充：我正在使用这个插件：http://jqueryui.com/demos/autocomplete/。谢谢@Sennet

**FIXED While() 循环（感谢 Sennett）适用于直接访问，但不适用于表单：

    $jsonArray = array();
    while ($result = $sth->fetch(PDO::FETCH_ASSOC)) 
     $jsonArray[] = array(
          'label' => $result['fanDetLocID'], 
          'value' => $result['fanDetLocCity']);
    
    print $jsonArray; // print results of array
    print json_encode($jsonArray); // json encode that array
   // can't have code between here

// and here
    catch(PDOException $e)
        file_put_contents('../../../PDODBConnectionErrors.txt', 'ERROR: [getFanLoc.php] about '.$e->getMessage().'<br>', FILE_APPEND);  
    

与 Sennet 合作 4 小时后，我们现在拥有：

<script type="text/javascript">
$(document).ready(function()

$('input#zip').autocomplete(

    dataType: "json",
    source: "../src/php/registration/getFanLoc.php",
    minLength: 3,
    select: function(event, args)
        event.preventDefault();
        var joinedValues = args.item.value;
        var id = joinedValues.split("|")[0];
        var cityAndState= joinedValues.split("|")[1];
        document.getElementById('actualZip').value = cityAndState ; 
            document.getElementById('zip').value = id;
    
);

);

【问题讨论】：

我相信自动完成功能通过 GET 而不是 POST 发送请求。

那么，我是否需要更改 line: $zip = mysql_real_escape_string($_POST['zipcode']); 以使用 $_GET var 而不是 $_POST ？

这将是我尝试确保得到预期响应的第一件事。

您能看看我在下面的其他 cmets 中遇到的问题吗？

【参考方案1】：

首先要做的是尝试直接通过网络浏览器访问文件。将其保留为$_GET。当您浏览到getFanLoc.php?zipcode=XXX 时会发生什么，其中 XXX 是已知存在的代码？有结果吗？

另外，假设您使用的是this plugin，您应该返回 JSON 而不是大量超链接 - 插件会为您将它们包装在 html 中。

【讨论】：

我尝试访问：index.php?../src/php/registration/getFanLoc.php?zipcode=08139，但我没有得到任何结果。我可以把我的 while 语句改成这样：$sth->execute(); while ($res = $sth->fetch(PDO::FETCH_ASSOC)) $res = json_encode(); echo $res;

指定：我正在使用该插件。

@user9 尝试转到http://servername/src/php/registration/getFanLoc.php?zipcode=08139，不要使用 index.php。如果这没有显示任何内容，请尝试一些 echo 语句并至少从中获得一个 hello world，然后查看数据库中是否有任何与邮政编码相对应的数据。之后打开 MySQL 查询日志并查看发送了哪些查询。问题是有太多可能出错的事情，尽管我有 80% 的把握将结果包装在 href 中会导致问题，因为我头脑中的自动完成需要特定的 JSON 响应。

只有在服务器肯定返回某些内容时才值得查看客户端代码。

我已经修改了 php 脚本来改变那个 while 循环。当我访问 getFanLoc.php?zipcode=08039 时，它说：false。这至少是一个很好的迹象，它喜欢 jQuery 足以压缩 php，我在那个循环中做错了什么？ （交叉手指，认为我们在这里越来越近了..）。想法？