有的時候我們會遇到這樣一個需求，一個用戶頁面中有多條履歷資訊，每條履歷資訊對應資料表中的一條記錄，用戶可以進行添加或修改，點擊保存時同時提交到了后臺，有兩個難點：1、前端怎樣一次性提交多條履歷資訊？2、后臺如何獲取 form 表單提交的多個 name 屬性值相同的 input 標簽中的值？
例如：
<form action="test.php" method="post" enctype="application/x-www-form-urlencoded"> 姓名：<input type="text" name="name"> 年齡：<input type="text" name="age"> <hr> 姓名：<input type="text" name="name"> 年齡：<input type="text" name="age"> <input type="submit" class="submit"> </form>
在這個表單中共有兩個欄位：姓名，年齡，這兩個欄位的input中的name屬性值都相同 ，如果我們用默認的表單提交方式：分成兩個表單分別提交，那只能提交一個表單的資訊；如果放在一個表單中直接提交，那后臺只能獲取表單中的最后一條資訊，因為name屬性值相同，后面的資訊會覆寫前面的資訊，這個時候就必須使用另一種方法了，
1、純文本內容的表單提交
首先，我們要重新處理表單代碼，將name屬性中的屬性值后面加一個[]，加上[]相當于把值放入一個陣列中 ，這樣就不用擔心后面的值會覆寫前面的值了，
<form action="test.php" method="post" enctype="application/x-www-form-urlencoded"> 姓名：<input type="text" name="name[]"> 年齡：<input type="text" name="age[]"> <hr> 姓名：<input type="text" name="name[]"> 年齡：<input type="text" name="age[]"> <input type="submit" class="submit"> </form>
當然，你也可以手動修改name屬性中的值，添加一個標志，讓它們變的不同，但比較麻煩，而且后臺獲取到之后處理起來比較麻煩，
現在頁面修改完成，后臺直接使用var_dump($_POST)列印一下前端傳來的結果，
結果如下：
可以看到，后臺接收到的資料是一個二維陣列，key為表單中的name屬性值，后臺接收到之后再進行處理
for($i=0;$i<count($_POST['name']);$i++){ $arr[$i]=array_column($_POST,$i); } var_dump($arr);
結果如下：
2、包含檔案的表單提交
和純文本表單上傳一樣，我們可以通過陣列的方式提交表單資訊，然后列印$_FILES陣列
結果如下：
當然，除了這種方式還有另一種方式，那就是使用ajax提交，
代碼如下：
<form enctype="multipart/form-data"> 姓名：<input type="text" name="name"> 年齡：<input type="text" name="age"> <input type="file" name="pic"> <hr> 姓名：<input type="text" name="name"> 年齡：<input type="text" name="age"> <input type="file" name="pic"> </form> <input type="submit" class="submit"> </body> <script> $('.submit').click(function () { var form = $('form')[0]; var formdata = https://www.cnblogs.com/huangzikai/p/new FormData(form); $.ajax({ url: 'test.php', data: formdata, type: 'post', dataType: "json", contentType: false, processData: false, success: function (data) { // code………… } }); }); </script>
FormData是js中的的一個物件，無需引入其它庫可以直接使用，功能是將form表單元素的name與value進行組合，實作表單資料的序列化，從而減少表單元素的拼接，提高作業效率，也就是說可以代替表單提交，FormData的引數是一個DOM物件，使用Jquery方法時別忘了將獲取的Jquery物件轉換為DOM物件，之后再使用Ajax方法傳給后臺，其中contentType和processData屬性的值都要設為false，功能是把表單中的enctype="application/x-www-form-urlencoded"轉換為enctype="multipart/form-data"，否則檔案會提交失敗，
既然使用ajax方式提交表單非常麻煩，那我們為什么還要使用呢，主要是為了實作異步傳輸，很多時候用戶提交完表單后想要知道是否提交成功，而后臺也需要回傳一個資訊給用戶，指導用戶的下一步操作，如果不使用異步傳輸，那在用戶填寫完資訊并提交后，后臺如果發現錯誤回傳錯誤詳細給用戶時，表單頁面已經重繪完畢了，之前填的資訊都要重新填寫一遍或是更多，非常的麻煩，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/136627.html
標籤：PHP