效果圖
需求：有的時候用戶根據不同需要添加多個表單，但是不確定到底添加多少個，所以就需要使用jq實現動態添加多個表單了，也可以刪除
解決方法：系統默認給兩個form表單，每一個表單都是一個form，而不是兩行共用一個form，動態添加的時候點擊左上角“添加”按鈕，追加的是一個單獨的form，每行都是一個form的好處是可以使用serialize序列化單獨獲取每個form表單的數據，這樣前端容易獲取，后台也容易處理。
代碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用戶名注冊</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> </head> <body> <input type="hidden" name="num"> <input type="submit" id="button" value="添加"> <div id="inp"> <form id="form1"> 用戶：<input type="text" name="name"> 密碼：<input type="password" name="pwd"> 郵箱：<input type="text" name="email"> </form><br> <form id="form2"> 用戶：<input type="text" name="name"> 密碼：<input type="password" name="pwd"> 郵箱：<input type="text" name="email"> </form><br> </div> <input type="submit" value="提交" id="sub"> </body> <script> $(document).ready(function () { var num = 3 //初始化from id 從3開始 $("#button").click(function () { var html = "<form id='form"+num+"'>用戶：<input id='yonghu' name='name' type='text'> 密碼：<input id='mima' name='pwd' type='password'> 郵箱：<input id='youxiang' name='email' type='text'> <input type='button' value='刪除'> </form><br>"; num += 1 //form id 加1 $("#inp").append(html); //追加html $(":button").click(function () { $(this).parent().remove(); //刪除 }); }); $("#sub").click(function (){ var newData = [] //定義數組，接收拼接的多個序列化之后的from的值 // console.log(num-1) for (var i = 1; i < num; i++) { console.log($("#form"+i).serialize()) if ($("#form"+i).serialize() !== '') { newData.push($("#form"+i).serialize()) //追加數組 只追加不為空的form（未刪除的form） } } // console.log(newData) $.ajax({ url:"{:url('test')}", type:"POST", dataType:"JSON", data:{newData:newData}, success:function (data) { console.log(data) // selss = data.data } }) }) }); </script> </html>
后台 Thinkphp5
public function test() { if (request()->isPost()) { $data = input('post.'); $newData = array(); foreach ($data['newData'] as $key => $value) { // 把查詢字符串解析到變量 newData 中 parse_str($value,$newData); // 插入數據庫 p($newData); } }else{ return $this->fetch(); } }
前端打印數據
后台打印的數據
