jquery实现动态创建form并提交的方法示例

要实现动态创建Form并提交数据，需要借助jQuery的appendTo()方法和submit()方法来实现。下面是详细的攻略：

一、创建HTML元素

首先，我们需要动态创建一个form元素，可以通过jQuery来实现：

var $form = $('<form></form>');

这里使用了jQuery的选择器语法来创建一个form元素，选择器中的<form>表示创建一个form元素。

接下来，我们需要向form元素中添加表单元素，比如<input>、<select>等。以添加一个文本框为例，代码如下：

var $form = $('<form></form>');
var $input = $('<input type="text" name="username">');
$form.append($input);

这个代码会向之前创建的form元素中添加一个名为“username”的文本框。

二、设置属性值

创建好表单元素后，我们需要设置表单元素的属性值，比如提交的URL地址、请求方式等。以设置表单提交地址为例，代码如下：

var $form = $('<form></form>');
$form.attr('action', 'http://www.example.com/submit.php');

这个代码会设置form的action属性为“http://www.example.com/submit.php”。

三、提交表单数据

最后，我们将form元素添加到页面中，并触发表单提交。代码如下：

var $form = $('<form></form>');
$form.attr('action', 'http://www.example.com/submit.php');
var $input = $('<input type="text" name="username">');
$form.append($input);
$form.appendTo('body');
$form.submit();

这个代码会将之前创建的form元素添加到页面中，并自动触发表单提交操作。

下面是另外两个示例：

示例一：完成表单构建及样式

HTML代码：

<div id="container"></div>

JavaScript代码：

var $form = $('<form></form>');
$form.attr('action', 'http://www.example.com/submit.php');

var $label = $('<label>Username:</label>');
var $input = $('<input type="text" name="username">');
$form.append($label).append($input);

var $button = $('<button type="submit">Submit</button>');
$form.append($button);

$form.css({
  'border': '1px solid #ccc',
  'padding': '10px',
  'margin': '10px'
});

$form.appendTo('#container');

这个示例代码会创建一个带有输入框和提交按钮的表单，同时设置了表单的边框、内边距和外边距。

示例二：使用ajax提交表单数据

HTML代码：

<div id="container"></div>

JavaScript代码：

var $form = $('<form></form>');
$form.attr('action', 'http://www.example.com/submit.php');

var $input = $('<input type="text" name="username">');
$form.append($input);

var $button = $('<button type="submit">Submit</button>');
$button.click(function(e) {
  e.preventDefault();
  var data = $form.serialize();
  $.ajax({
    type: 'POST',
    url: $form.attr('action'),
    data: data,
    success: function(response) {
      console.log(response);
    },
    error: function(xhr, status, error) {
      console.log(xhr.responseText);
    }
  });
});
$form.append($button);

$form.css({
  'border': '1px solid #ccc',
  'padding': '10px',
  'margin': '10px'
});

$form.appendTo('#container');

这个示例代码将使用ajax来提交表单数据，并且在提交之前需要先将表单数据序列化为字符串形式。成功提交后，会将响应结果输出到控制台。