时间戳

首页 > 解决方案 > 使用从表上的查询获得的数据动态更改 html 选择表单元素中的选项

javascript - 使用从表上的查询获得的数据动态更改 html 选择表单元素中的选项

问题描述

我正在尝试制作一个表格，用户可以在其中填写客户的姓氏，然后程序需要使用输入的名称在数据库中搜索具有相同姓氏的任何客户。然后需要用查询的结果填充选择表单元素，从而允许用户选择正确的客户信息。选择正确的客户后，需要执行另一个查询以搜索单独的表，以获取与所选客户的客户 ID 关联的所有地址。

流程 *用户输入客户姓氏 *查询以获取具有相同姓氏的所有客户 **选择框填充客户数据 *用户选择正确的客户 *查询以查找具有相同客户 ID 的所有地址 **单独选择框填充第二个查询结果

我想用ajax来完成这个

标签： javascriptphphtmlajaxmysqli

解决方案

PRG模式

引起我注意的第一件事与您的实际问题无关，但确实在调试中起作用。引起我注意的是

if (isset($_POST['search_button'])){

在 HTML 输出已经开始之后。经验法则，POST 变量应该在顶部使用，并且总是被重定向（除了 ajax）。查看 Post-Redirect-Get 模式。

但是，在这种情况下，您应该使用 GET，因为您没有更改数据，只是读取特定数据。

这导致我进入调试步骤

分离逻辑和表示

首先执行所有逻辑，然后当所有这些都完成后，关闭 php 并编写您的 html（演示文稿），仅将 php 用于模板（循环、填充变量、次要演示条件）

这在调试时非常有用，因为您不必挖掘无关的 html 代码。

因此，您的代码可以重新排序为：

<?php

if (isset($_GET['search_button'])){
    require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/config.php";
    
    $fName = $_GET['fName'];
    $lName = $_GET['lName'];
    
// more code here
}
// any other code here
?>
<html>
    <!— and so forth —&gt;

准备好的报表

现在是学习更好的安全性的时候了。此查询对 sql 注入开放。永远，永远，永远不要将原始变量放入查询中。您应该使用准备好的语句，其中用户数据与查询分开处理。此示例假设您有一个 PDO 连接$pdo。

$stmt = $pdo->prepare("SELECT * FROM Customers Where FirstName LIKE ? AND  LastName LIKE ?");
$stmt->execute(
    [
        $_GET['fName'],
        $_GET['lName']
    ]
);

// iterate through results with $stmt->fetch()

合并此更改将修复代码中的错误。（$search->fetch...是一个错误）

把它包起来

<?php

if (isset($_GET['search_button'])) {
    require_once "/home/users/web/b1240/dom.heather93124/public_html/resources/config.php";

    $stmt = $pdo->prepare("SELECT * FROM Customers WHERE FirstName = ? AND  LastName = ?");
    $stmt->execute(
        [
            $_GET['fName'],
            $_GET['lName']
        ]
    );
}
?>
<HTML>
... snip ...

     <div class="form-popup" id="newApp">
        <form  method="get" class="form-container">
            <h1>New Appointment</h1>
            <label for="emp_select"><b>Select Employee</b></label>
                <select id = "emp_select" name="emp_select0">
                    <?php
                        include "/home/users/web/b1240/dom.heather93124/public_html/resources/employee.php";
    
                    ?>
    
                </select><br>
            <input type="text" name="fName" id="fName" placeholder="First name">
            <input type="text" name="lName" id="lName" placeholder="Last name"><br>
            <input type="button" class = "btn" value="Search" name="search_button"></button><br>  
            <select id = "custSelect" name="custSelect0">
            <?php while($row = $stmt->fetchObject()): ?>
                <option value="<?= $row->CustId ?>"><?= $row->fName ?> <?= $row->lName ?></option>
            <?php endwhile; ?>

... snip ...

请注意，这未经测试，您可能需要根据自己的喜好调整 pdo 选项。

推荐阅读