表單提交的問題一直困擾著我這個新手，現(xiàn)在也算學(xué)習(xí)了不少，解決了我現(xiàn)在有的問題 —— 提交了表單之后將數(shù)據(jù)給到后臺并且讓前端頁面跳轉(zhuǎn)到想要的頁面或出現(xiàn)想要的內(nèi)容。

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

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

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

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

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

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

提交

3 js 代碼：

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

$( //頁面加載完執(zhí)行

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

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

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

})

)

//配置 options 選項

var options = {

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

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

success: successFun, //提交成功后的回調(diào)函數(shù)，即成功后可以定頁面跳到哪里

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

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

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

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

}

//設(shè)置提交成功后返回的頁面

function successFun(data,status) {

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

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

}

我用的是?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 是因為要給一個可以提交過去的地址，一般都是后臺給的，為了記錄就寫上了。

有不足之處歡迎指正，共同學(xué)習(xí)。

(⌒▽⌒)

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。