通過上次的嘗試我們發(fā)現(xiàn)表單中可以通過onsubmit來一定程度的控制form的submit動作檩奠。但是很快我們就發(fā)現(xiàn)這種情況下無法控制submit的后續(xù)動作,也就是頁面跳轉(zhuǎn)附帽。那么怎么解決這個問題呢埠戳,我們進(jìn)一步可以觀察發(fā)現(xiàn)大多數(shù)時候我們是通過一個type=submit的按鈕來實(shí)現(xiàn)表單提交的。也就是在form的onsubmit之前士葫,我們實(shí)際上會有一個點(diǎn)擊按鈕的操作乞而,那么我們就可以通過阻止按鈕的默認(rèn)動作來阻止form的submit。
然后由此引申我們可以創(chuàng)造一個另外的按鈕用來提交form慢显,舉個小例子:
在這段代碼中我們就使用了一個name為submit的按鈕進(jìn)行提交爪模,當(dāng)然在這里沒有寫關(guān)于checkform的代碼,但是我們這樣需要每個按鈕都添加onclick荚藻,那個不符合我們“偷懶”的程序員的人設(shè)屋灌,所以我們又想出一個辦法:
這段代碼請引入jquery使用,我們很“偷懶”的讓js替我們找到了submit并且在它的上一級form執(zhí)行submit前阻止了它应狱,也就是最后return false的作用共郭。
那我們何時進(jìn)行ajax提交呢?
繼續(xù)上例子:
在這個例子中,我們在提交表單的阻止方法中增加了ajax提交除嘹,其中data就是我們表單中的數(shù)據(jù)通過key/value方式進(jìn)行組織并提交写半。
留下兩個思考吧:
1、當(dāng)form的action為空的時候如何提交
2尉咕、data如何組織或者序列化叠蝇,key/value的方式組織之后還需要什么操作?(ps:這好像是三個問題年缎,不過不要在意這些細(xì)節(jié))
以上是從項(xiàng)目中拷貝并脫敏后的代碼悔捶,但是還是要感謝開源,感謝從前前輩的分享单芜。