表單提交的問題一直困擾著我這個新手，現在也算學習了不少，解決了我現在有的問題 —— 提交了表單之后將數據給到后臺并且讓前端頁面跳轉到想要的頁面或出現想要的內容。

用到了 jQuery Form Plugin，表單提交的第三方插件，為了更方便的管理和提交表單。(官網：http://plugins.jquery.com/form/)

借鑒：https://blog..net/m0_37505854/article/details/79639046(主要)

https://www..com/hudandan/p/5912336.html

我在這只寫如何提交并顯示想要的內容(跳轉到頁面同理)，其中有好多概念什么的，我沒列舉出來，不了解的可以先看一遍官網的文檔或其他的相關文檔，有個大概的了解之后再去參考別人寫的代碼，就會好理解很多，我就是這樣做的。

1 引入 jQuery.js 和 jquery-form.js：

2 HTML 里寫的代碼就是很普通的表單控件：

提交

3 js 代碼：

重點就是 js 代碼的部分了，這是實現表單提交之后的顯示的！

$( //頁面加載完執行

$("#ajaxForm").on("submit",function () { //表單提交時監聽提交事件

$(this).ajaxSubmit(options); //當前表單執行異步提交，optons 是配置提交時、提交后的相關選項

return false; // 必須返回false，才能跳到想要的頁面

})

)

//配置 options 選項

var options = {

url: "/postform", //提交地址：默認是form的action,如果申明,則會覆蓋

type: "post", //默認是form的method(get or post)，如果申明，則會覆蓋

success: successFun, //提交成功后的回調函數，即成功后可以定頁面跳到哪里

dataType: "json", //接受服務端返回的類型

clearForm: true, //成功提交后，清除所有表單元素的值

resetForm: true, //成功提交后，重置所有表單元素的值

timeout: 3000 //設置請求時間，超過該時間后，自動退出請求，單位(毫秒)

}

//設置提交成功后返回的頁面

function successFun(data,status) {

$("#showForm").html(data.msg); //提交表單后從后臺接收到的返回來的數據，我保存到了msg里

// $("#showForm").html("或者這里可以直接寫想要顯示的內容")

}

我用的是?nodejs (非必須)：

app.post("/postform",function (req, res) {

console.log(req.body);

userLink.create({

"name": req.body.user,

"age": req.body.age

},function (err) {

if(err) throw err;

res.status(200).json({success: true,msg: "提交成功，這是你想要返回的頁面。"});

})

})

其實寫 nodejs 是因為要給一個可以提交過去的地址，一般都是后臺給的，為了記錄就寫上了。

有不足之處歡迎指正，共同學習。

(⌒▽⌒)

總結

以上是生活随笔為你收集整理的html提交成功跳转页面,提交表单后跳转到想要的页面--jQuery form的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。