在開發的時候，發現一段較爲有趣的舊代碼。在這段代碼裏，開發人員利用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 |
代碼實現步驟
- 創建form元素
let form= document.createElement('form')
- 設置form屬性
form.action='http://api'
form.enctype='application/json'
form.method='post'
form.target='_blank'
- 設置form表單數據
// 說明一下，form表單數據，就是裏面的input元素
let inputName=document.createElement('input')
inputName.setAttribute('name','name')
inputName.setAttribute('value', 'zhangsan')
form.appendChild(inputName)
- 提交form
// form提交前，需要追加到頁面裏
document.body.appendChild(form)
form.submit()
// 執行完成後，從頁面裏清除
form.parentNode.removeChild(form)