JS ajax提交form表單

form 表單的預設提交方式會重新整理頁面，而且會在頁面之間進行跳轉。如果需要保持當前使用者對錶單狀態的改變，就要在後臺控制器和前端頁面中傳遞更多的引數，因此對於前端與後臺處理資訊互動比較頻繁的場景，form 表單預設的提交方式並不友好。

為了應對以上的場景，使用 Ajax 提交 form 表單是一種很好的解決辦法。因為 Ajax 可以在不重新整理頁面的情況下提交請求，然後在處理響應時通過 JavaScript 操作 DOM，並展示後臺處理的資訊。

通用處理

在使用 Ajax 提交 form 表單時，需要對 form 表單進行特殊的處理，包括以下幾點：

• 將 form 標籤的 action 屬性和 method 屬性去掉。
• 將提交 form 表單按鈕的 type="submit" 改為 type="button"。

在對 form 表單做通用處理後，我們利用以下一段 form 表單程式碼進行接下來的 Ajax 提交 form 表單資訊的測試。

<form name="userForm" id="userForm">
    <div class="form-group">
        <label for="username">使用者名稱</label>
        <input type="text" class="form-control" name="username" id="username">
    </div>
    <div class="form-group">
        <label for="password">密碼</label>
        <input type="password" class="form-control" name="password" id="password">
    </div>
    <div class="form-group">
        <label for="telphone">電話</label>
        <input type="text" class="form-control" name="telphone" id="telphone">
    </div>
    <div class="form-group">
        <label for="email">郵箱</label>
        <input type="text" class="form-control" name="email" id="email">
    </div>
    <div class="text-center">
    <input type="button" class="btn btn-default btn-primary" value="提交" id="submit">
        <input type="button" class="btn btn-default" value="取消" id="cancel">
    </div>
</form>

這是一段類似於使用者註冊頁面的程式碼，包含使用者名稱、密碼、電話、郵箱等幾個輸入文字方塊，通過提交按鈕可以將使用者輸入的資訊提交到伺服器端。

為了讓頁面佈局和展示更美觀，頁面 HTML 程式碼中使用了 bootstrap 樣式，展現效果如下圖所示：

---