JavaScript动态创建form表单并提交的实现方法

这里是关于JavaScript动态创建和提交表单的完整攻略。

1. 动态创建表单

在JavaScript中，动态创建表单包括以下三个步骤：

1.1 创建form元素

使用document.createElement方法创建一个新的form元素，代码示例：

var form = document.createElement('form');
form.setAttribute('method', 'post');
form.setAttribute('action', 'submit.php');
document.body.appendChild(form);

1.2 创建表单中的表单项

使用document.createElement方法创建表单所需的各种表单项，包括input、textarea、select等，代码示例：

var usernameInput = document.createElement('input');
usernameInput.setAttribute('type', 'text');
usernameInput.setAttribute('name', 'username');
form.appendChild(usernameInput);

1.3 设置表单项属性及值

对每个表单项设置相应的属性及值，例如设置input的类型、名称、值等，代码示例：

var passwordInput = document.createElement('input');
passwordInput.setAttribute('type', 'password');
passwordInput.setAttribute('name', 'password');
passwordInput.setAttribute('value', '123456');
form.appendChild(passwordInput);

2. 提交表单

2.1 通过submit方法提交表单

在动态创建表单中，提交表单的最简单方法是通过submit方法直接提交表单，示例代码：

form.submit();

2.2 使用XMLHttpRequest对象提交表单

通过Ajax方式提交表单，需要使用XMLHttpRequest对象，示例代码：

var xhr = new XMLHttpRequest();
xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    console.log(xhr.responseText);
  }
};
xhr.send(new FormData(form));

以上两条示例均会将表单数据以POST方式提交到submit.php页面，并输出响应内容。

希望以上示例可以帮到你，如有需要可以再继续探讨。