使用对数据库表的查询结果填充 html 表单选择元素

Posted 2023-03-25

【中文标题】使用对数据库表的查询结果填充 html 表单选择元素

【英文标题】：Populate html form select element with results from query on database table

【发布时间】：2021-04-26 13:10:04

【问题描述】：

我正在尝试制作一个包含文本输入和下拉选择元素的表单。目标是能够在文本框中输入将在查询中使用的客户姓氏的文本。然后需要将查询的结果放在选择下拉框中以供进一步使用，其中值为 custID，文本为客户的名字和姓氏，可能还有电话号码。到目前为止，每当我运行它并输入任何值时，无论我输入什么，我都只会在我的警报框中得到 data[] 和 status:succesful。

这是我一直在玩的表单和ajax。

    <form  method="post" class="form-container" >
                <input type="text" name="lName" id="lName" placeholder="Last name" 
                onkeyup="showCustomer(this.value)"><br>
                <select id = "custSelect" name="custSelect0" onchange="show(this)">
                <option value="">-- Select Customer--</option>
            </select><br>
    </form>
<script>

    function showCustomer(str) 
          //alert("click");
          var LastName = str;
          var ele = document.getElementById('custSelect');
       //alert (LastName);
       $.ajax(
            url:"getcustomer.php",
            type:"POST",
            data:customer:LastName,

            success:function(data, status)
                alert("Data: " + data + "\nStatus: " + status);
                //alert("Search succesful")
                    /*  $.each(data, function(i,item)) 
                          // POPULATE SELECT ELEMENT WITH JSON.
                          ele.innerhtml = ele.innerHTML +
                              '<option value="' + data[i]['custId'] + '">' + data[i]['fname'] + ' ' + data[i]['lname'] + '</option>';
                      */
            
          )
        

        function show(ele) 
          // GET THE SELECTED VALUE FROM <select> ELEMENT AND SHOW IT.
          var msg = document.getElementById('msg');
          msg.innerHTML = 'Selected Customer: <b>' + ele.options[ele.selectedIndex].text + '</b> </br>' +
              'ID: <b>' + ele.value + '</b>';

    </script>

这是我用来访问数据库并进行查询的 php 文件。它正在使用 PDO。

<?php

      require_once "configPDO.php";
    if(isset($_POST['customer']))
      $customer = $_POST['customer'];
    
    
    $data = array();
    
    $sql = "SELECT *
    FROM `customers`
    WHERE `LastName`
    LIKE '$customer'";
    
    $statement = $connect->prepare($sql);
    //$statement->bind_param("s", $_GET['q']);
    $statement->execute();
    $result = $statement->fetchAll();
    
    foreach($result as $row)
      $data[] = array(
        'custId' => $row["Cust_ID"],
        'fname' => $row["FirstName"],
        'lname' => $row["LastName"],
        'phone' => $row["PhoneNumber"],
        'altPhone' => $row["AltPhone"]
      );
    
    
    echo json_encode($data);
    
    
    ?>

【问题讨论】：

如果您收到data[]，这表明您的查询没有返回任何内容。你需要为 LIKE 添加一些通配符来做任何有用的事情。试试LIKE '%$customer%'"

遗憾的是没有变化。得到同样的东西。感谢您的建议

首先调试PHP/mysql部分。您的代码目前似乎没有实现任何错误控制（除非您将 PDO 设置为在创建连接时抛出异常？），因此您甚至不会注意到准备语句或执行查询是否失败。

好的，我知道我需要在安全方面工作，我会在它关闭我的测试服务器之前，但现在我该如何让它工作

我在连接文件和查询文件中都添加了错误控制。我还设置了准备好的语句和通配符。我现在得到结果了

【参考方案1】：

使用此视频中的信息进行一些建议的更改后 https://www.youtube.com/watch?v=RcW8mMiIexc 并更正我要搜索的表格的拼写，我已经能够让它将结果返回到表单。

<?php
      require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/configPDO.php";
    if(isset($_POST['customer']))
        $customer = $_POST['customer'];
    
        $data = array();
    
        try
          $sql = "SELECT * FROM `Customer` WHERE `LastName` LIKE :customer";
          $customer = "%$customer%";
          $stmt = $connect->prepare($sql);
          $stmt->bindValue(':customer', $customer);
          $stmt->execute();
          while($row = $stmt->fetch(PDO::FETCH_ASSOC))
            $data[] = array(
              'custId' => $row["Cust_ID"],
              'fname' => $row["FirstName"],
              'lname' => $row["LastName"],
              'phone' => $row["PhoneNumber"],
              'altPhone' => $row["AltPhone"]
            );
            
    
        echo json_encode($data);
        catch(Exception $e)
          echo $e-getMessage();
        
    
    ?>