陣列方式進行表單提交

2022-03-09 12:22:26 字數 1540 閱讀 6932

今天遇到乙個問題,要儲存很多表單資訊,苦惱了許久,終於發現乙個挺不錯的方法,以陣列的形式把表單中的資料提交至後台進行儲存。

其實實現起來很簡單,就是給表單中要提交的資訊的name命名時要有一定的規範,我們先比較下下面這兩種方式的差別:

第一種、普通的方式,每個要提交的值都有乙個名稱

服務(index.php)很簡單就兩句話

<?php 

echo "";

print_r($_get);

在渲染好的網頁上填入下面資訊並點選提交

通過瀏覽器看到的 query string paramaters是這樣的

在服務段會收到這樣的資訊

對與後端來說這樣可能不是太好處理,要是能把同一組的三個資訊放在乙個陣列中,是不是就好處理多了,下面再看看另外一種方式

第二種、陣列的方式進行表單提交

細心看看就會發現,要提交的資料的名字name發生了變化,在這裡看可能還不太明顯,當點選提交後會發現傳到後端的值整齊多了,看看下面的截圖

通過瀏覽器外掛程式解析過的查詢字串是這樣的

服務端列印出來的資料是這樣的:

當後台收到這樣的資料的時候是不是就好處理多了,省了好多事,當然,這個地方還有要注意的地方,在給要提交的值命名的時候陣列中不用加引號,加引號之後後端的鍵值中會存在引號,這點要注意。還有一點要注意的是,現在更流行的做法是ajax提交,用ajax提交的時候怎麼獲取表單中的值呢?這個其實也很簡單通過jquery提供的serialize()方法可以很方便的將所有要提交的內容拼接成url字串,然後通過get的方式就可以提交給後台了。

當然了,實際中還可能遇到這樣的問題,要提交的組數(像上面的1、2、3)是不確定的,可以在前端隨意的新增,這個時候怎麼去用陣列提交這些內容呢?這個還是可以通過合適的明明很便捷的解決掉的,

先看看瀏覽器傳遞的資料

這個時候後端收到的資料是這樣的

得到這樣的資料,也很容易將每一組的資訊進行歸類了。是不是很方便呢,在沒有使用這個方法之前,我每次遇到這樣的問題都很頭疼,現在可以輕鬆的解決掉了。

form 表單提交方式

表單可實現無重新整理頁面提交,無需頁面跳轉,如下,通過乙個隱藏的iframe實現,form表單的target設定為iframe的name名稱,form提交目標位當前頁面iframe則不會重新整理頁面 一般表單提交通過type submit實現,input type submit 瀏覽器顯示為butt...

Jquery ajax方式提交表單

jquery ajax方式提交表單,目前用過的有兩種方式 1 引人jquery.js和jquery.easyui.min.js後,用下面的方法 checkform1 form submit urlhidden value e j j.length e index html j.length docu...

使用表單onsubmit屬性進行表單提交前js判定

專案是乙個bbs論壇專案,需要在表單進行提交前判定標題是否為空,若為空的話則不允許進行提交。一般的處理方式為 發布主題然後在submitform 函式內部進行提交前的判定,最後進行提交或者輸出提示後不提交。但是感覺這樣 混雜度更高,使用onsubmit屬性應該會使 更加簡潔。而且也不用手動呼叫sub...