使用jQuery和下拉列表更新网站

时间:2016-07-20 13:11:40

标签: javascript php jquery mysql

当用户在我的下拉列表中更改所选信息时,我正在尝试对某些数据库数据进行简单打印。

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

<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返回它但我有点卡住:(并且可能需要一些正确方向的帮助。

1 个答案:

答案 0 :(得分: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.
?>

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

  

确保使用bindParam方法访问数据库数据   避免SQL注入。