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

时间：2015-01-29 23:55:12

标签： javascript php mysql ajax

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

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

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

员工表如下所示：
EMPLOYEE_ID
FNAME
LNAME
佣金

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

<?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);
}
?>

1 个答案:

答案 0 :(得分：0)

我明白了。这是最终的代码。

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);
}
?>
相关问题
最新问题