js控制form提交

多毛大叔愛蘿莉發表於2018-08-02
JSORM

form表單提交，之前有個下載的專案介面，需要上url上邊傳超級多東西，但是 url是限制長度的 每個瀏覽器限制的url長度還不一樣，所以就想到用form表單的action提交表單。

form標籤 定義和用法 詳細瞭解請點選
標籤用於為使用者輸入建立 HTML 表單。

表單能夠包含 input 元素，比如文字欄位、核取方塊、單選框、提交按鈕等等。

表單還可以包含 menus、textarea、fieldset、legend 和 label 元素。

表單用於向伺服器傳輸資料。（我們要用到的）

form提交資料用法

在這裡我就寫個用js呼叫事件提交表單。表單不在頁面上顯示的例子。

下面這段程式碼 form標籤的屬性 method 就是請求方法 跟 jquery的ajax一樣這裡我使用post請求、 form標籤的屬性 enctype 規定傳送表單資料之前如何對其進行編碼、form標籤的屬性 target="_blank" 就相當於在新頁面開啟 我這裡做的是下載 所以要在新頁面開啟。

 <form method="post" enctype="application/x-www-form-urlencoded" id="form-submit" target="_blank">
   <input type="hidden" name="account" value="多毛大叔愛蘿莉"/>
   <input type="hidden" name="password" value="7758521"/>
</form>
<button type="button" id="go">go</button>
//這裡的name就是相當於post屬性的引數 value就是你傳的值 type是hidden 是因為我不想再頁面上看到他所以讓他隱藏了
複製程式碼

接下來我們用js呼叫事件 動態給 form 新增 action 屬性讓form知道我們要讓他請求拿個位置。

// js 獲取form表單
var form_submit = document.getElementById('form-submit');
// js獲取按鈕
var go = document.getElementById('go');
// 當點選go時執行事件
go.addEventListener（'click',function(){
  // 動態給form表單設定請求位置
  form_submit.active = "http://www.daxuehua.cn";
  // 讓form表單提交
  form_submit.submit()
}）
複製程式碼

這樣子就可以解決如果 url的值太長沒法下載東西的問題

相關文章