Javascript 使用下拉列表中的值查询MySQL数据库，然后使用结果填充文本字段，而不刷新页面_Javascript_Php_Mysql_Ajax

Javascript 使用下拉列表中的值查询MySQL数据库，然后使用结果填充文本字段，而不刷新页面

javascript php mysql ajax

Javascript 使用下拉列表中的值查询MySQL数据库，然后使用结果填充文本字段，而不刷新页面,javascript,php,mysql,ajax,Javascript,Php,Mysql,Ajax,我有一个下拉列表，表单中填充了MySQL数据库employee_id、fname、lname中名为“employees”的表中的员工列表。这很好用接下来我需要做的是，当从下拉列表中选择员工时，我需要查询employees表以获取员工佣金百分比，然后用该值填充表单中的另一个文本字段问题是我需要在不重新加载页面的情况下执行此操作。我一直在搜索Google，看起来我需要使用AJAX和JavaScript。要做到这一点，我的问题是我对AJAX一无所知，尽管我对java脚本有一些经验 employee

我有一个下拉列表，表单中填充了MySQL数据库employee_id、fname、lname中名为“employees”的表中的员工列表。这很好用

接下来我需要做的是，当从下拉列表中选择员工时，我需要查询employees表以获取员工佣金百分比，然后用该值填充表单中的另一个文本字段

问题是我需要在不重新加载页面的情况下执行此操作。我一直在搜索Google，看起来我需要使用AJAX和JavaScript。要做到这一点，我的问题是我对AJAX一无所知，尽管我对java脚本有一些经验

employees表如下所示：雇员身份证文件名名字委托

以下是我到目前为止的情况

<?php
// DB connection
require_once('Connections/freight.php');

// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
    Agent:
    <select name="employee_id" id="employee_id">
        <option selected="selected" value="">- select agent -</option>
        <?php do { ?>
          <option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
        <?php
        } while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
        $rows = mysqli_num_rows($rsEmployeeList);
        if($rows > 0) {
          mysqli_data_seek($rsEmployeeList, 0);
          $row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
        }
        ?>
    </select>
    Commision: 
    <input name="commission" type="text" id="commission" size="3" />
    <input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>
</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>

好的，我看了另一个问题，虽然它是不同的，我试图改变周围的代码使其工作，但我没有任何运气。当我从下拉列表中选择一个项目时，什么也没有发生。下面是更新的代码。我不确定我是否走上了正确的道路

<?php
// DB connection
require_once('Connections/freight.php');

// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $("#employee_id").change(function () {   

      var employee_id = $(this).val();

       $.ajax({
            type: "GET", 
            url: "ajax.php", 
            data: {employee_id: employee_id},
            dataType: "json",
            success: function(data){
                var comm = data[0].commission;
                $('#commission').empty(); 
                $('#commission').append('<option value="0">0.00</option>');         
                $('#commission').append('<option value="' + comm + '">' + comm + '</option>');
                $('#commission').focus();
            },
            beforeSend: function(){
                $('#commission').empty();
                $('#commission').append('<option value="0">Loading...</option>');
            },
            error: function(){
                $('#commission').empty();
                $('#commission').append('<option value="0.00">0.00</option>');
            }
        })  

    }); 
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
    Agent:
    <select name="employee_id" id="employee_id">
        <option selected="selected" value="">- select agent -</option>
        <?php do { ?>
          <option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
        <?php
        } while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
        $rows = mysqli_num_rows($rsEmployeeList);
        if($rows > 0) {
          mysqli_data_seek($rsEmployeeList, 0);
          $row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
        }
        ?>
    </select>
    Commision: 
    <input name="commission" type="text" id="commission" size="3" />%
    <input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>

</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>

下面是ajax用来查询数据库的test2.php文件

<?php
// DB connection
require_once('Connections/freight.php');

if (isset($_GET['employee_id'])) {   
    $employee_id = $_GET['employee_id'];
    $return_arr = array();
    $result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");   

    while($row = $result->fetch_assoc()) {
        $row_array = array("commission" => $row['commission']); 
        array_push($return_arr,$row_array);     
    }
    echo json_encode($return_arr);
}
?>

我想出来了。这是最后的代码

test.php

<?php
// DB connection
require_once('Connections/freight.php');

// get employee list for dropdown
$query_rsEmployeeList = "SELECT employee_id, fname, lname FROM employees ORDER BY fname ASC";
$rsEmployeeList = mysqli_query($con, $query_rsEmployeeList) or die(mysqli_error($con));
$row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
$totalRows_rsEmployeeList = mysqli_num_rows($rsEmployeeList);
?>
<html>
<head>
<title>demo</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript">
$(document).ready(function() {
    $("#employee_id").change(function () {   

      var employee_id = $(this).val();

       $.ajax({
            type: "GET", 
            url: "ajax.php", 
            data: {employee_id: employee_id},
            dataType: "json",
            success: function(data){
                var comm = data[0].commission;
                $('#commission').empty(); 
                $('#commission').val(comm);
                $('#commission').focus();
            },
            beforeSend: function(){
                $('#commission').empty();
                $('#commission').val('0.00');
            },
            error: function(){
                $('#commission').empty();
                $('#commission').val('0.00');
            }
        })  

    }); 
});
</script>
</head>
<body>
<form id="frmAddAgents" name="frmAddAgents" method="post" action="">
    Agent:
    <select name="employee_id" id="employee_id">
        <option selected="selected" value="">- select agent -</option>
        <?php do { ?>
          <option value="<?php echo $row_rsEmployeeList['employee_id']?>"><?php echo $row_rsEmployeeList['fname']?> <?php echo $row_rsEmployeeList['lname']?></option>
        <?php
        } while ($row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList));
        $rows = mysqli_num_rows($rsEmployeeList);
        if($rows > 0) {
          mysqli_data_seek($rsEmployeeList, 0);
          $row_rsEmployeeList = mysqli_fetch_assoc($rsEmployeeList);
        }
        ?>
    </select>
    Commision: 
    <input name="commission" type="text" id="commission" size="3" />%
    <input type="submit" name="button" id="button" value="Add Agent To Load" />
</form>

</body>
</html>
<?php
mysqli_free_result($rsEmployeeList);
?>

ajax.php

<?php
// DB connection
require_once('Connections/freight.php');

if (isset($_GET['employee_id'])) {   
    $employee_id = $_GET['employee_id'];
    $return_arr = array();
    $result = $con->query ("SELECT commission FROM employees WHERE employee_id = $employee_id");   

    while($row = $result->fetch_assoc()) {
        $row_array = array("commission" => $row['commission']); 
        array_push($return_arr,$row_array);     
    }
    echo json_encode($return_arr);
}
?>

可能是它的复制品不太一样，但我还是试了一下。我对代码做了一些修改，试图让它正常工作，但我仍然没有任何运气。当前，当我从下拉列表中选择一个项目时，什么也没有发生。我将更新后的代码添加到我原来的帖子中