Question

我有一个由数据库填充的下拉列表（学生的名字和姓氏）。这很好用。有一些JavaScript允许搜索工作，但它与我的问题无关。代码：

<div class="dropdown">
    <button onclick="myFunction()" class="dropbtn">Find person ></button>
      <div id="Dropdown" class="drop-content">
        <input type="text" placeholder="Search" id="myInput"

这个想法是让用户从下拉列表中选择一个人，然后将有关该学生的信息输出到与下拉列表相同的页面上（因此不会重新加载页面）。目前它没有做任何事情，也没有出现任何错误。

Answer 1

以下是我将如何开始：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div class="dropdown">
    <button class="dropbtn">Find Student ></button>
    <div id="myDropdown" class="dropdown-content">
        <input type="text" placeholder="Search.." id="myInput" onkeyup="filterFunction()">
        <div id="studentdrop">
            <?php
            // $pdo = new PDO('mysql:host=localhost;dbname=thename', 'root', 'root');
            // $result = $pdo->query('SELECT student_forename, student_surname FROM students');
            $result = array(
                array("student_id" => 1, "student_forename" => 'Joe', "student_surname" => 'Jones'),
                array("student_id" => 2, "student_forename" => 'Mary', "student_surname" => 'Jones'),
                array("student_id" => 3, "student_forename" => 'Perry', "student_surname" => 'Wallace')
            );
            echo "<select id='user_id'>";
            foreach ($result as $row) {
                echo '<option value="' . $row['student_id'] . '">' . $row['student_forename'] . " " . $row['student_surname'] . '</option>';
            }
            echo "</select>";
            ?>
        </div>
    </div>
</div>

<div class="data"></div>

<script type="text/javascript">
    $(document).ready(function () {
        $('.dropbtn').click(function () {
            $.get( "output.php", { id: $('#user_id option:selected').val() }, function(data) {
                $('.data').text(data);
                console.log(data);
            });
        });
    });
</script>

</body>
</html>

这将是从数据库中提取并使用选项设置选择的页面。您将不得不修改，因为我没有时间设置数据库并测试它。但结果是一个可以与选择选项一起使用的数组。

我还更新了javascript以使get请求获取用户数据并使用返回的数据填充<div>标记。

以下是output.php页面：

<?php
$id = $_GET['id'];
switch($id) {
    case 1:
        echo "This is student Joe Jones";
        break;
    case 2:
        echo "This is student Mary Jones";
        break;
    case 3:
        echo "This is student Perry Wallace";
        break;
}

这是一个简单的页面，但您可以对其进行修改以查询数据库并返回所需的任何数据。这是使用来自id页面的ajax get请求中传入的index.php。我建议添加输入验证和检查以确保它是已清理的数据。

如果您创建目录并将这两个文件放在那里，则可以使用内置服务器中的 PHP 运行它。这是我喜欢做的事：php -S localhost:8080。

如果您有任何疑问，请与我们联系。

Answer 2

流程 -

用户下拉更改 - ＆gt; JS触发的功能 - ＆gt;调用PHP文件并返回响应 - ＆gt;在JS函数中获取响应 - ＆gt;更新您的DOM。

现在你必须在你的其他文件所在的同一目录中创建output.php（你可能会根据你的结构稍后改变），现在在你的JS函数中你没有将任何内容传递给php文件 - 你需要传递SELECTED数据。

JS编辑： 如果使用POST，则以JSON格式传递数据;如果使用GET，则传递给URL。

PHP编辑： 解码$ _POST ['var_name']中的JSON数据或使用$ _GET ['var_name']直接访问get参数。

这应该有用......如果有的话，请告诉我。

下拉选择后，存储选择并刷新与mysql数据库结果相同的页面

2 个答案: