js动态生成form 并用ajax方式提交的实现方法

下面我将为你详细讲解“js动态生成form 并用ajax方式提交的实现方法”的完整攻略。

1. 创建Form表单

通过JavaScript代码创建一个空白的表单对象，可以通过以下方式：

var form = document.createElement('form');

接下来设置表单的相关属性，例如表单的方法、action、enctype等，示例代码如下：

form.action = 'submit.php';     // 设置表单提交的地址
form.method = 'post';           // 设置表单提交方法
form.enctype = 'multipart/form-data';  // 设置表单提交时的编码方式

2. 创建表单元素

在表单中添加表单元素，可以通过JavaScript代码动态创建表单元素，例如创建一个input元素：

var input = document.createElement('input');
input.type = 'text';
input.name = 'username';
input.value = '请输入用户名';
form.appendChild(input);

3. 提交表单

通过AJAX方式提交表单，可以使用XMLHttpRequest对象和FormData对象。首先创建XMLHttpRequest对象：

var xhr = new XMLHttpRequest();

然后创建FormData对象，将表单元素添加到FormData对象中：

var formData = new FormData(form);

其中，form为创建的表单对象，通过FormData对象可以将表单元素生成键值对的形式，方便提交表单。接着设置XMLHttpRequest对象的事件处理程序，例如监听POST请求的状态：

xhr.onload = function () {
  if(xhr.status == 200) {
    alert(xhr.responseText);
  }
};

最后发送AJAX请求，并将FormData对象传递给send()方法：

xhr.open('POST', 'submit.php', true);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(formData);

在这个示例中，通过XMLHttpRequest对象发送了一个POST请求，Content-Type为application/x-www-form-urlencoded，POST请求的主体为表单数据。提交表单时也可以使用Fetch API或jQuery等工具库进行实现，具体使用方法可自行查找相关文档和示例。

示例一

以下为一个简单的示例，创建一个包含输入框和提交按钮的表单，并通过AJAX方式提交：

var form = document.createElement('form');
form.action = 'submit.php';
form.method = 'post';

var input = document.createElement('input');
input.type = 'text';
input.name = 'username';
input.placeholder = '请输入用户名';
form.appendChild(input);

var btn = document.createElement('input');
btn.type = 'button';
btn.value = '提交';
btn.onclick = function() {
  var xhr = new XMLHttpRequest();
  var formData = new FormData(form);
  xhr.onload = function () {
    if(xhr.status == 200) {
      alert(xhr.responseText);
    }
  };
  xhr.open('POST', 'submit.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(formData);
}
form.appendChild(btn);

document.body.appendChild(form);

示例二

以下为另一个示例，创建包含多个输入框和上传文件的表单，并通过AJAX方式提交：

var form = document.createElement('form');
form.action = 'submit.php';
form.method = 'post';
form.enctype = 'multipart/form-data';

var username = document.createElement('input');
username.type = 'text';
username.name = 'username';
username.placeholder = '请输入用户名';
form.appendChild(username);

var password = document.createElement('input');
password.type = 'password';
password.name = 'password';
password.placeholder = '请输入密码';
form.appendChild(password);

var select = document.createElement('select');
select.name = 'gender';
var option1 = document.createElement('option');
option1.value = 'male';
option1.text = '男';
select.add(option1);
var option2 = document.createElement('option');
option2.value = 'female';
option2.text = '女';
select.add(option2);
form.appendChild(select);

var file = document.createElement('input');
file.type = 'file';
file.name = 'file';
form.appendChild(file);

var btn = document.createElement('input');
btn.type = 'button';
btn.value = '提交';
btn.onclick = function() {
  var xhr = new XMLHttpRequest();
  var formData = new FormData(form);
  xhr.onload = function () {
    if(xhr.status == 200) {
      alert(xhr.responseText);
    }
  };
  xhr.open('POST', 'submit.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.send(formData);
}
form.appendChild(btn);

document.body.appendChild(form);

以上就是“js动态生成form 并用ajax方式提交的实现方法”的攻略，希望对你有帮助。