本文主要介绍了 JavaScript 动态创建 Form 表单并提交的实现方法,涉及 JavaScript 动态创建页面元素及模拟表单提交的技巧。
众所周知通过 Ajax 请求后整个页面是不会刷新的(Ajax 局部刷新),可是有时候我们需要刷新整个页面,这时可能就需要动态创建一个 Form:
function makeForm() {
// 创建一个 form
var form = document.createElement("form");
form.id = "form_id";
form.name = "form_name";
// 添加到 body 中
document.body.appendChild(form);
// 创建一个输入框
var input = document.createElement("input");
// 设置相应参数
input.type = "text";
input.name = "username";
input.value = "zhangsan";
// 将该输入框插入到 form 中
form.appendChild(input);
// form 提交方式
form.method = "POST";
// form 提交路径
form.action = "/index";
// 执行提交
form.submit();
// 删除该 form
document.body.removeChild(form);
}
调用 makeForm 后,立即创建一个新的 Form,并提交,然后移除该 Form。
有时可能并不需要创建一个新的 Form,而是在已存在的 Form 上添加东西:
<form action="/index" method="post" id="form_id"></form>
// 获取已存在的 Form
var form = document.getElementById("form_id");
var input = document.createElement("input");
input.type = "text";
input.name = "username";
input.value = "zhangsan";
form.appendChild(input);
form.submit();