用Javascript同時(shí)提交多個(gè)Web表單的方法
更新時(shí)間:2009年12月26日 02:19:50 作者:
使用Javascript同時(shí)提交多個(gè)Web表單的方法
1問(wèn)題來(lái)自一位網(wǎng)友的提問(wèn):
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)用才可以。
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ù)值隨機(jī)數(shù)
查手冊(cè)后才知道, 介紹的信息少得可憐吶, 沒(méi)有介紹生成 m-n 范圍的隨機(jī)數(shù)..., 就只是給你一個(gè) Math.random() 了事.2009-01-01
Javascript 遍歷對(duì)象中的子對(duì)象
昨天同事問(wèn)我一個(gè)問(wèn)題:“有一個(gè)JSON對(duì)象,其中有若干個(gè)子對(duì)象,如何遍歷這個(gè)對(duì)象中的子對(duì)象?”2009-07-07
ts依賴引入報(bào)錯(cuò):無(wú)法找到模塊“xxxxxx”的聲明文件問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于ts依賴引入報(bào)錯(cuò):無(wú)法找到模塊“xxxxxx”的聲明文件問(wèn)題的解決辦法,文中通過(guò)示例帶將解決辦法介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳(下)
這篇文章主要為大家詳細(xì)介紹了HTML5+Canvas調(diào)用手機(jī)拍照功能實(shí)現(xiàn)圖片上傳,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04
一直都需要的復(fù)制到系統(tǒng)剪貼板之IE,firefox兼容版
一直都需要的復(fù)制到系統(tǒng)剪貼板之IE,firefox兼容版...2007-09-09
JavaScript Dom 綁定事件操作實(shí)例詳解
這篇文章主要介紹了JavaScript Dom 綁定事件操作,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript實(shí)現(xiàn)dom綁定事件的相關(guān)實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下2019-10-10
web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果
這篇文章主要介紹了web頁(yè)面和微信小程序頁(yè)面實(shí)現(xiàn)瀑布流效果,本文通過(guò)實(shí)例代碼圖文介紹,給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2018-09-09

