javascript - 使用 jQuery 和下拉菜单更新网站

Question

当用户更改下拉列表中所选的信息时，我尝试简单打印一些数据库数据。

我已经找到了如何从下拉列表中提供信息并将其输出到我的文本字段中。

<script type="text/javascript">
$(document).ready(function(e) {
    $("#date").datepicker();
    $("#formGender").change(function()
{
    /* setting currently changed option value to option variable */
    var option = $(this).find("option:selected").val();
    /* setting input box value to selected option value */
    $("#showoption").val(option);   
});
});
</script>

所以我真正想要的是，我想用从这个下拉列表中获得的信息进行 MySQL 调用。

类似于:

SELECT * FROM table WHERE 'option' = customerNo

我可以读到我需要创建一个单独的文件并调用该函数并使用 GET/POST 返回它，但我有点卡住了:(并且可能需要一些正确方向的帮助。

Answer 1

AJAX 就是您需要的东西，

当用户更改下拉列表的值时，调用 AJAX 从数据库获取值，因此您的 jQuery 可能看起来像这样，

$("#formGender").change(function()
{
    /* setting currently changed option value to option variable */
    var option = $(this).find("option:selected").val();
    /* setting input box value to selected option value */
    $("#showoption").val(option); 

    $.ajax({
       type: 'GET',
       url: 'PATH/TO/YOUR_PHP_FILE_NAME.php',
       data:{'inputval':option},
       success: function(data)
       {
           // access returned data here..
       },
   });
});

现在您的 PHP 文件将如下所示，

YOUR_PHP_FILE_NAME.php

<?php
    $inputval=$_GET['inputval'];
    $sql_Query="SELECT * FROM table WHERE option = '".$inputval."'";

    // Perform database operations and other things.
    // Return response here using echo.
    // You can use header('Content-Type: application/json'); to return JSON data.
?>

在$.ajax函数的.success()回调中处理这些返回的数据。

Make sure you use bindParam method to access the database data to avoid SQL injections.