用Javascript同時(shí)提交多個(gè)Web表單的方法
web頁(yè)面里有多個(gè)表單,每個(gè)表單對(duì)應(yīng)著某一類數(shù)據(jù)操作。
比如一個(gè)詳細(xì)的簡(jiǎn)歷信息頁(yè)面分
1、個(gè)人資料
2、工作經(jīng)驗(yàn)
3、項(xiàng)目經(jīng)驗(yàn)
4、其他信息 4個(gè)表單。
一般的需求是允許用戶單獨(dú)提交其中任何一個(gè)表單到下一個(gè)頁(yè)面進(jìn)行修改操作(也就是說(shuō)頁(yè)面有4個(gè)不同的修改按鈕,點(diǎn)擊哪個(gè)按鈕則只提交某一個(gè)表單的數(shù)據(jù)到服務(wù)器,并根據(jù)表單的action)。
現(xiàn)在有這樣的需求,允許用戶選擇其中任意的一個(gè)或多個(gè)表單進(jìn)行提交修改,這樣的話在客戶端如何提交表單?
聲明:可能會(huì)有人說(shuō)將4個(gè)表單合成一個(gè)大表單,根據(jù)修改按鈕的不同在服務(wù)器端進(jìn)行不同的數(shù)據(jù)操作即可。這是一種解決辦法,但考慮到頁(yè)面數(shù)據(jù)量比較大,為了提高效率,減少數(shù)據(jù)傳輸量,還是希望能夠分成多個(gè)表單提交,所以這個(gè)辦法暫不考慮。是不是一定要用js或ajax?如果不用呢?
2 個(gè)人觀點(diǎn)
1 用Ajax提交,比如prototype
new Ajax.Request("/do1",{parameters:$("form1").serialize().......);
new Ajax.Request("/do2",{parameters:$("form2").serialize().......);
你可以同時(shí)調(diào)用多個(gè),默認(rèn)是異步提交,所以可以同時(shí)提交多個(gè)表單,這個(gè)方案是最簡(jiǎn)單的。
2 使用多個(gè)iframe,然后將每個(gè)表單的target指向不同的iframe
然后用js的
document.getElementById("form1").submit();
document.getElementById("form2").submit();
。。。
這個(gè)樣子進(jìn)行提交。
3 兩個(gè)方法的對(duì)比
Ajax方便簡(jiǎn)單,對(duì)結(jié)果的處理也比較省事,框架都替我們做好了,但不能跨域提交
iframe最符合一般的使用,也可以跨域提交,處理返回結(jié)果稍微麻煩些,需要在iframe里面使用 parent.進(jìn)行調(diào)用才可以。
相關(guān)文章
JavaScript實(shí)現(xiàn)存儲(chǔ)HTML字符串示例
這篇文章主要介紹了JavaScript存儲(chǔ)HTML字符串的具體實(shí)現(xiàn),需要的朋友可以參考下2014-04-04js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)
本文主要介紹了js實(shí)現(xiàn)按座位號(hào)抽獎(jiǎng)的示例代碼。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-04-04JavaScript自動(dòng)設(shè)置IFrame高度的小例子
JavaScript自動(dòng)設(shè)置IFrame高度的小例子,需要的朋友可以參考一下2013-06-06JS+CSS實(shí)現(xiàn)消息的點(diǎn)擊展示和隱藏(H5端)
在 H5 端,我們經(jīng)常需要實(shí)現(xiàn)類似于點(diǎn)擊按鈕來(lái)展示或隱藏消息的功能,以下是一個(gè)使用 CSS 和 JavaScript(配合 Vue.js)來(lái)實(shí)現(xiàn)這個(gè)效果的簡(jiǎn)單示例,需要的朋友可以參考下2023-10-10javascript高級(jí)學(xué)習(xí)筆記整理
打算做一個(gè)js面向?qū)ο蟮呢澇陨?但是最終是流產(chǎn)了,整理了下廢棄的代碼,回顧了下PPT.想學(xué)習(xí)js面向?qū)ο蟮呐笥岩部梢詤⒖枷隆?/div> 2011-08-08使用layui監(jiān)聽(tīng)器監(jiān)聽(tīng)select下拉框,事件綁定不成功的解決方法
今天小編就為大家分享一篇使用layui監(jiān)聽(tīng)器監(jiān)聽(tīng)select下拉框,事件綁定不成功的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Javascript 浮點(diǎn)運(yùn)算精度問(wèn)題分析與解決
浮點(diǎn)數(shù)的精度問(wèn)題不是JavaScript特有的,因?yàn)橛行┬?shù)以二進(jìn)制表示位數(shù)是無(wú)窮的2014-03-03JS實(shí)現(xiàn)頁(yè)面超時(shí)后自動(dòng)跳轉(zhuǎn)到登陸頁(yè)面
這篇文章主要介紹了JS實(shí)現(xiàn)頁(yè)面超時(shí)后自動(dòng)跳轉(zhuǎn)到登陸頁(yè)面,需要的朋友可以參考下2015-01-01最新評(píng)論