创建表单并动态提交 jQuery - Javascript

在网页开发中，表单是不可或缺的元素之一，而表单的提交是将表单数据传递到后端服务器的重要方法。在很多情况下，我们需要动态创建表单，并且在用户输入完毕后动态提交表单数据。本文将介绍如何使用 jQuery 和 Javascript 来创建表单并动态提交表单数据。

第一步：创建表单

首先，我们需要动态创建一个表单元素。可以使用 jQuery 的 append 方法来向 HTML 页面添加元素：

$('body').append('<form id="myForm"></form>');

上面的代码动态创建了一个 ID 为 myForm 的表单元素，并将其添加到页面的 body 中。为了让表单有一些输入控件，我们可以在表单中添加一些输入框、下拉框等控件：

$('#myForm').append('<label for="firstname">First Name:</label><br>');
$('#myForm').append('<input type="text" id="firstname" name="firstname"><br>');
$('#myForm').append('<label for="lastname">Last Name:</label><br>');
$('#myForm').append('<input type="text" id="lastname" name="lastname"><br>');
$('#myForm').append('<label for="gender">Gender:</label><br>');
$('#myForm').append('<select id="gender" name="gender"><option value="M">Male</option><option value="F">Female</option></select><br>');

上面的代码创建了三个输入框和一个下拉框，并将它们添加到了表单元素 myForm 中。这些输入框和下拉框都有一个 name 属性，用于标识表单中的该控件。

第二步：提交表单数据

接下来，我们需要在用户点击“提交”按钮时动态提交表单数据。可以使用 jQuery 的 submit 方法来提交表单数据：

$('#myForm').submit(function(event) {
  event.preventDefault();

  var formData = {
    'firstname': $('input[name=firstname]').val(),
    'lastname': $('input[name=lastname]').val(),
    'gender': $('select[name=gender]').val(),
  };

  $.ajax({
    type: 'POST',
    url: 'submit.php',
    data: formData,
    dataType: 'json',
    encode: true
  })

  .done(function(data) {
    console.log(data);
  })

  .fail(function(data) {
    console.log(data);
  });
});

上面的代码创建了一个名为 formData 的对象，包含了表单中所有输入控件的值。接下来使用 jQuery 的 ajax 方法将该对象作为数据提交到后端服务器的一个 PHP 脚本。该脚本的 URL 为 submit.php，请求的数据类型为 JSON 格式。

在提交表单时，我们也可以对表单中的输入数据进行一些验证。例如，判断用户输入的字符串是否合法，或者判断用户是否输入了必填项。如果检测到表单输入数据有问题，可以在 fail 函数中返回一些错误信息。

结论

以上就是动态创建表单并提交表单数据的全部过程。当然，这只是一个简单的例子，实际开发中会更加复杂和灵活。不过无论何时，使用 jQuery 和 Javascript 动态创建和提交表单都是一个非常方便的方法。