将 HTML PHP PDO 捆绑在一起答案

【问题标题】：Tying HTML PHP PDO together将 HTML PHP PDO 捆绑在一起
【发布时间】：2019-07-15 15:04:48
【问题描述】：

我对此很陌生，这是我在 stackoverflow 上的第一篇文章。我只是想：创建一个下拉列表 1) 每次更改时触发查询 (Gettech.php) 2) 用查询结果更新另一个字段

在这种情况下，他们选择了一个“技术名称”，并且每次“技术名称”更改时，它都应该使用关联的“技术编号”（PDO 查询的结果）更新另一个字段。这就是我所拥有的：

<!DOCTYPE HTML>  
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<form action="Gettech.php" method="get">
<div class="row">
     <div class="col-sm-6 form-group">
       <label for="name"> Name:</label>
       <select class= "form-control" id="techname" name=techname><option value="">Select...</option>
       <option value="First Name">First Name</option>
       <option value="Second Name">Second Name</option>                       .
        .
        .
       </select>
</div>
</form>
</body>
</html>

和 Gettech.php 部分

<?php
$servername = "localhost";
$username = "####";
$password = "####";
$name = "Joey";
try {
     $db = new PDO('mysql:host=localhost;dbname=staff', $username, $password);
	} catch (PDOException $e) {
	echo $e->getMessage()."<br>";
    die();
	}
$sql = "SELECT name, techid from techs where name= '$name'";
foreach( $db->query($sql) as $row ) {
echo $row['name']."<br>".$row['techid']."<br>";
									}
$db = null;
?>

它们各自工作，但不知道如何将它们组合成一个可行的解决方案。欢迎提示！

【问题讨论】：

再次检查您的 SQL 查询
是什么让你认为给定的查询是有效的？您应该通过$db->errorInfo() 明确检查 SQL 错误
PHP noob 和 Nico- 在尝试清理帖子的查询时，我消除了太多......“where name =”有一个值。完成后，它可以自行工作。我正在尝试将表单中选择的名称带入查询并将结果显示到表单上的第二个字段中。感谢您的回复。
您能否编辑您的帖子以使其完整？
@KBell 谢谢！ :)

标签： php html mysql pdo

【解决方案1】：

根据您对您正在尝试执行的操作的描述，您确实需要使用 Javascript/JQuery 执行此操作。我没有测试过这段代码，只是希望能让你走上正确的道路。请访问https://learn.jquery.com/ajax/jquery-ajax-methods了解AJAX。

HTML

<!DOCTYPE HTML>  
<html>
    <head>
          <meta charset="utf-8">
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
          <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
          <script src="js/ajax.js"></script>
    </head>
    <body>
        <form>
            <div class="row">
                <div class="col-sm-6 form-group">
                   <label for="name"> Name:</label>
                   <select class="form-control" id="techname" name=techname>
                   <option value="">Select...</option>
                   <option value="First Name">First Name</option>
                   <option value="Second Name">Second Name</option>
                    .
                    .
                   </select>
                </div>
            </div>
        </form>
        <div id="content"> <!-- AJAX DATA --> </div>
    </body>
</html>

PHP

<?php
$servername = "localhost";
$username = "####";
$password = "####";
$name = "Joey";
try {
        $db = new PDO('mysql:host=localhost;dbname=staff', $username, $password);
} catch (PDOException $e) {
    $error = [
        'status' => "error",
        'error'  => $e->getMessage()
    ];

    return json_encode($error);
}

// Sanitize and validate this for security & integrity purposes
if (isset($_GET['name'])) {
    $name = $_GET['name'];
} else {
    $error = [
        'status' => "error",
        'error'  => "$_GET not received"
    ];

    return json_encode($error);
}

$sql = "SELECT name, techid FROM techs WHERE name = :name";
// Make sure you are using prepared statements, 
// it's one of the most powerful security features of PDO
$stmt = $db->prepare($sql);
$stmt->bindValue(':name', $name, PDO::PARAM_STR);
$stmt->execute();

// You need to "fetch" the result before you can use it
$result = $stmt->fetchAll();

$db = null;

foreach($result as $key => $row) {
    $html .= "<div>{$row['name']}</div>";
    $html .= "<div>{$row['techid']}</div>";
}

$data = [
            'status' => "success",
            'html'   => $html
        ];

return json_encode($data);
?>

ajax.js

// Wait for DOM to be ready
$(function() {
    $('#techname').on('change', function(e) {

        // Prevents page from reloading
        e.preventDefault();

        var value = $("option:selected", this).val();

        $.ajax({
            type: "GET",
            // If file is not in docroot, you need to specify the subdirectory
            url: "Gettech.php",
            dataType: "JSON",
            data: value.serialize(),
            beforeSend: function() {
                // Good idea to put a loader here so the user knows 
                // something is happening if request takes time
                $('.loading').fadeIn('fast');
            },
            success: function(result) {

                if (result.status === "error") {
                    var data = result.error;
                } else if (result.status === "success") {
                    var data = result.html;
                }

                // Hide the loader once completed
                $('.loading').fadeOut('fast');

                // Add query data to the DOM
                $('#content').html(data);
            }
        });
    });
});

【讨论】：

这远远超出了我的要求，非常感谢。第二次提到阿贾克斯，所以我会积极地看待它。完成后我会发布最终结果。非常感谢。
另外，我发现您的 HTML 中缺少 </div>，请注意我的更新。