下面是详细的“jQuery实现表单动态添加数据并提交的方法”的攻略:
1. 准备工作
- 引入jQuery库文件
在HTML文件中,我们需要先引入jQuery库文件以便于使用相关的jQuery函数。
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
- 编写表单
我们需要先编写一个表单,包含需要添加数据的输入框和提交按钮。
<form id="myform">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age">
<br>
<input type="button" value="添加" id="add">
<input type="submit" value="提交">
</form>
- 准备数据容器
我们需要准备一个容器,用于存放动态添加的数据。
<ul id="dataList"></ul>
2. 添加数据功能的实现
当点击“添加”按钮时,需要获取输入框中的值,并将其添加到数据容器中。
$(function() {
$("#add").on("click", function() {
var name = $("#name").val();
var age = $("#age").val();
var li = "<li>" + name + "," + age + "岁</li>";
$("#dataList").append(li);
});
});
在添加数据的函数中,我们首先获取了输入框中的值。然后使用jQuery的append()函数将生成的HTML代码添加到容器中。
3. 提交数据功能的实现
当点击“提交”按钮时,需要将数据容器中的所有数据提交到后台服务器上。
$(function() {
$("#myform").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: "submit.php",
type: "post",
data: formData,
success: function(data) {
alert("提交成功!");
$("#dataList").html("");
},
error: function() {
alert("提交失败!");
}
});
});
});
在提交数据的函数中,我们监听了表单的提交事件,并且阻止了表单默认的提交行为。然后使用jQuery的serialize()函数将表单中的所有字段序列化为字符串。
最后,我们使用jQuery的ajax()函数将数据发送到后台服务器,并在成功回调函数中提示用户提交成功,并清空数据容器。
示例
在这里,我们展示两条使用jQuery实现表单动态添加数据并提交的示例:
示例一
在此示例中,我们将数据添加到使用了Bootstrap样式的表单中。
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("#add").on("click", function() {
var name = $("#name").val();
var age = $("#age").val();
var tr = "<tr><td>" + name + "</td><td>" + age + "</td></tr>";
$("#dataList").append(tr);
});
$("#myform").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: "submit.php",
type: "post",
data: formData,
success: function(data) {
alert("提交成功!");
$("#dataList").html("");
},
error: function() {
alert("提交失败!");
}
});
});
});
</script>
</head>
<body>
<div class="container">
<h2>表单数据</h2>
<form id="myform">
<div class="form-group">
<label for="name">姓名:</label>
<input type="text" class="form-control" id="name" name="name">
</div>
<div class="form-group">
<label for="age">年龄:</label>
<input type="text" class="form-control" id="age" name="age">
</div>
<button type="button" class="btn btn-primary" id="add">添加</button>
<button type="submit" class="btn btn-success">提交</button>
</form>
<br>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody id="dataList">
</tbody>
</table>
</div>
</body>
</html>
在此示例中,我们使用了Bootstrap样式的表单和表格,动态添加的数据以表格形式展现。
示例二
在此示例中,我们对动态添加数据的功能进行了扩展,允许用户删除某一行数据。
<!DOCTYPE html>
<html>
<head>
<title>jQuery示例</title>
<meta charset="UTF-8">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$("#add").on("click", function() {
var name = $("#name").val();
var age = $("#age").val();
var tr = "<tr><td>" + name + "</td><td>" + age + "</td><td><button type='button' class='btn btn-danger delete'>删除</button></td></tr>";
$("#dataList").append(tr);
});
$(document).on("click", ".delete", function() {
$(this).parents("tr").remove();
});
$("#myform").submit(function(event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
url: "submit.php",
type: "post",
data: formData,
success: function(data) {
alert("提交成功!");
$("#dataList").html("");
},
error: function() {
alert("提交失败!");
}
});
});
});
</script>
</head>
<body>
<h2>表单数据</h2>
<form id="myform">
<label for="name">姓名:</label>
<input type="text" id="name" name="name">
<br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age">
<br>
<input type="button" value="添加" id="add">
<input type="submit" value="提交">
</form>
<br>
<table>
<thead>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>操作</th>
</tr>
</thead>
<tbody id="dataList">
</tbody>
</table>
</body>
</html>
在此示例中,我们添加了一个“删除”按钮,允许用户删除某一行数据。我们通过监听“点击”事件,在用户点击“删除”按钮时移除对应的行数据。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:jQuery实现表单动态添加数据并提交的方法 - Python技术站