如何从选定的ajax下拉PHP插入数据

Question

这是我的代码示例：

在 index.php 中，我创建了下拉 HTML 并加载了带有 MySQL 数据库表中员工姓名的下拉列表。

<div class="page-header">
<h3>
<select id="employee">
<option value="" selected="selected">Select Employee Name</option>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM 
employee LIMIT 10";
$resultset = mysqli_query($conn, $sql) or die("database error:". 
mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<option value="<?php echo $rows["id"]; ?>"><?php echo 
$rows["employee_name"]; ?></option>
<?php } ?>
</select>
</h3>
</div>
<div id="display">
        <div class="row" id="heading" style="display:none;"><h3><div 
class="col-sm-3"><strong>Employee Name</strong></div><div class="col-sm-4"> 
<strong>Age</strong></div><div class="col-sm-4"><strong>Salary</strong> 
</div> 
</h3></div><br>         
 <div class="row" id="records"><div class="col-sm-3" id="emp_name"></div> 
<div class="col-sm-4" id="emp_age"></div><div class="col-sm-3" 
id="emp_salary"></div></div>            
        <div class="row" id="no_records"><div class="col-sm-3">Plese select 
employee name to view details</div></div>
    </div>      
    <div style="margin:50px 0px 0px 0px;">
<input type="submit" class="btn btn-default read-more" name="submit" value="submit">
</div>      
</div>

使用 jQuery Ajax 加载下拉选择数据现在在 getData.js JavaScript 文件中，我们将处理下拉选择更改事件以获取选定值并向服务器 getEmployee.php 发出 Ajax 请求以从 MySQL 数据库表员工中获取选定员工详细信息。 Ajax 请求从服务器获取 JSON 格式的响应员工数据。 我们将使用 jQuery 显示该响应 JSON 数据。

$(document).ready(function(){
// code to get all records from table via select box
$("#employee").change(function() {
var id = $(this).find(":selected").val();
var dataString = 'empid='+ id;
$.ajax({
url: 'getEmployee.php',
dataType: "json",
data: dataString,
cache: false,
success: function(employeeData) {
if(employeeData) {
$("#heading").show();
$("#no_records").hide();
$("#emp_name").text(employeeData.employee_name);
$("#emp_age").text(employeeData.employee_age);
$("#emp_salary").text(employeeData.employee_salary);
$("#records").show();
} else {
$("#heading").hide();
$("#records").hide();
$("#no_records").show();
}
}
});
})
});

从 MySQL 数据库中获取数据

现在终于在 getEmployee.php 中，我们将从 MySQL 数据库表中获取员工详细信息，并使用 json_encode 以 JSON 形式返回数据。

<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM 
employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". 
mysqli_error($conn));
$data = array();
while( $rows = mysqli_fetch_assoc($resultset) ) {
$data = $rows;
}
echo json_encode($data);
} else {
echo 0;
}
?>

现在，我将添加提交按钮，如果设置了该按钮，我想在单击下拉选项中的员工姓名之一后插入已显示在表中的数据。 我怎么做？

Answer 1

您应该将提交按钮 .click 事件链接到 Ajax 调用。

此外，您必须有 insertEmp.php 文件，该文件将进行插入。

首先，为您的提交按钮设置一个 id (id = submitButton)

代码的近似值可能是这样的：

$('#submitButton').click(function() {

    $.ajax({
        url:"/insertEmp",
        type: "POST",
        data: {emp_name:$('#emp_name').val() , emp_salary:$('#emp_salary').val() , .. all the others parameters...  },
        success: function (results) {
        },
        error: function (results) {
        }
    })
})