jQuery实现表单动态添加数据并提交的方法

下面是详细的“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技术站

jQuery实现表单动态添加数据并提交的方法

1. 准备工作

2. 添加数据功能的实现

3. 提交数据功能的实现

示例

示例一

示例二

相关文章