利用Form替代ajax请求

在开发的时候，发现一段较为有趣的旧代码。在这段代码里，开发人员利用form表单，发起了post请求，并在新页面打开了这个请求。

在习惯了用ajax来进行交互，看到这种方式，有种眼前一亮的感觉。我一直以为没有办法在新的页面里打开post请求，但是通过这种方式，就能实现了。

我网上查一下form表单的基本信息

Form 对象属性

属性	描述	W3C
acceptCharset	服务器可接受的字符集。	Yes
action	设置或返回表单的 action 属性。	Yes
enctype	设置或返回表单用来编码内容的 MIME 类型。	Yes
length	返回表单中的元素数目。	Yes
method	设置或返回将数据发送到服务器的 HTTP 方法。	Yes
name	设置或返回表单的名称。	Yes
target	设置或返回表单提交结果的 Frame 或 Window 名。	Yes

这些对象属性，是可以通过js代码读取的。

Form 对象方法

方法	描述	W3C
reset()	重置一个表单	Yes
submit()	提交一个表单	Yes

代码实现步骤

1. 创建form元素

let form= document.createElement('form')

2. 设置form属性

form.action='http://api'
form.enctype='application/json'
form.method='post'
form.target='_blank'	

3. 设置form表单数据

// 说明一下，form表单数据，就是里面的input元素
let inputName=document.createElement('input')
inputName.setAttribute('name','name')
inputName.setAttribute('value', 'zhangsan')
form.appendChild(inputName)

5. 提交form

// form提交前，需要追加到页面里
document.body.appendChild(form)
form.submit()
// 执行完成后，从页面里清除
form.parentNode.removeChild(form)