3、创建insert.php文件获取form.html中提交过来的数据,并储存到数据库中员工姓名、年龄、部门、居住地、员工等级(初级、中级、高级等)。4、使用ajax异步请求
时间: 2023-10-20 17:26:48 浏览: 34
下面是一种可能的实现方式:
在form.html中,需要有一个表单,其中包含员工姓名、年龄、部门、居住地、员工等级等字段,以及一个提交按钮。表单中每个字段需要有一个合适的name属性,方便在insert.php中获取数据。
在insert.php中,可以使用PHP提供的mysqli扩展连接到MySQL数据库,并将表单中提交过来的数据插入到一个名为"employees"的表中。具体实现步骤如下:
```php
<?php
// 获取表单中提交过来的数据
$name = $_POST['name'];
$age = $_POST['age'];
$department = $_POST['department'];
$residence = $_POST['residence'];
$level = $_POST['level'];
// 连接到MySQL数据库
$mysqli = new mysqli("localhost", "username", "password", "database_name");
// 检查连接是否成功
if ($mysqli->connect_error) {
die("连接失败: " . $mysqli->connect_error);
}
// 将数据插入到employees表中
$sql = "INSERT INTO employees (name, age, department, residence, level) VALUES ('$name', '$age', '$department', '$residence', '$level')";
if ($mysqli->query($sql) === TRUE) {
echo "数据插入成功";
} else {
echo "数据插入失败: " . $mysqli->error;
}
$mysqli->close();
?>
```
在form.html中,可以使用jQuery库中的ajax方法,以POST方式将表单数据异步提交到insert.php中,并在提交成功后显示一个提示信息。具体实现步骤如下:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工信息录入</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function() {
$('form').submit(function(event) {
event.preventDefault(); // 阻止默认提交行为
$.ajax({
url: 'insert.php',
method: 'POST',
data: $(this).serialize(), // 将表单数据序列化为字符串
success: function(response) {
alert(response);
},
error: function() {
alert('提交失败');
}
});
});
});
</script>
</head>
<body>
<form>
<label>姓名:<input type="text" name="name"></label><br>
<label>年龄:<input type="number" name="age"></label><br>
<label>部门:<input type="text" name="department"></label><br>
<label>居住地:<input type="text" name="residence"></label><br>
<label>员工等级:
<select name="level">
<option value="初级">初级</option>
<option value="中级">中级</option>
<option value="高级">高级</option>
</select>
</label><br>
<input type="submit" value="提交">
</form>
</body>
</html>
```