文章詳情頁(yè)
springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法
瀏覽：303日期：2022-06-11 16:22:24
1. 需要注意的問(wèn)題
- mvc框架的處理日期問(wèn)題
- @ResponseBody響應(yīng)對(duì)象是自定義對(duì)象，響應(yīng)不是json
- @ResopnseBody響應(yīng)自定義對(duì)象時(shí)，日期為是long類型的數(shù)
- 結(jié)束數(shù)據(jù)方法的參數(shù)，該如何定義？接收多個(gè)對(duì)象？
2. 頁(yè)面代碼
<%@ page language="java" isELIgnored="false" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>ajax批量新增操作</title><script type="text/javascript" src="js/jquery-3.4.1.js"></script></head><body> <form id="myForm"> <table border="1" > <tr> <td>姓名</td> <td>身份證</td> <td>時(shí)間</td> <td>direction</td> <td>type</td> <td>操作</td> </tr> <tbody id="tbody"> <tr> <td> <!-- 集合為自定義實(shí)體類中的結(jié)合屬性，有幾個(gè)實(shí)體類，改變下標(biāo)就行了。 --> <input type="text" name="visitorList[0].name"/> </td> <td> <input type="text" name="visitorList[0].cardNo"/> </td> <td> <input type="date" name="visitorList[0].visitorTime"/> </td> <td> <input type="radio" value="1" name="visitorList[0].direction"/>進(jìn)入 <input type="radio" value="2" name="visitorList[0].direction"/>離開(kāi) </td> <td> <input type="radio" value="1" name="visitorList[0].type"/> 內(nèi)部 <input type="radio" value="2" name="visitorList[0].type"/> 外部 </td> <td> <input type="button" value="移除"> </td> </tr> </tbody> <tr> <td colspan="6"> <input id="add" type="button" value="新增visitor" /> <input id="save" type="button" value="保存"/> </td> </tr> </table> </form> <script> $(function() { var index_val = 0; $("body").on("click", ".remove", function() { // 移除當(dāng)前行, 通過(guò)父級(jí)來(lái)綁定... // $(this).parent().parent().remove(); $("#tbody tr").remove(); // 覆蓋，生成行 if (index_val > 0) { var data_str = ""; for (var i = 0; i < index_val; i++) { data_str += "<tr>" + "<td>" + " <input type="text" name="visitorList[" + i + "].name"/>" + "</td>" + "<td>" + " <input type="text" name="visitorList[" + i + "].cardNo"/>" + "</td>" + "<td>" + " <input type="date" name="visitorList[" + i + "].visitorTime"/>" + "</td>" + "<td>" + " <input type="radio" value="1" name="visitorList[" + i + "].direction"/>進(jìn)入" + " <input type="radio" value="2" name="visitorList[" + i + "].direction"/>離開(kāi)" + "</td>" + "<td>" + " <input type="radio" value="1" name="visitorList[" + i + "].type"/> 內(nèi)部" + " <input type="radio" value="2" name="visitorList[" + i + "].type"/> 外部" + "</td>" + "<td>" + " <input class="remove" type="button" value="移除">" + "</td>" + "</tr>"; } $("#tbody").append(data_str); } // 把下標(biāo)減少一 就行了，就是移除了。 index_val --; console.log("remove: ", index_val); }); $("#add").click(function() { // 自增1 index_val ++; var data_str = "<tr>" + "<td>" + " <input type="text" name="visitorList[" + index_val + "].name"/>" + "</td>" + "<td>" + " <input type="text" name="visitorList[" + index_val + "].cardNo"/>" + "</td>" + "<td>" + " <input type="date" name="visitorList[" + index_val + "].visitorTime"/>" + "</td>" + "<td>" + " <input type="radio" value="1" name="visitorList[" + index_val + "].direction"/>進(jìn)入" + " <input type="radio" value="2" name="visitorList[" + index_val + "].direction"/>離開(kāi)" + "</td>" + "<td>" + " <input type="radio" value="1" name="visitorList[" + index_val + "].type"/> 內(nèi)部" + " <input type="radio" value="2" name="visitorList[" + index_val + "].type"/> 外部" + "</td>" + "<td>" + " <input class="remove" type="button" value="移除">" + "</td>" + "</tr>"; $("#tbody").append(data_str); console.log("add==>" + index_val); }); $("#save").click(function() { var form_data = $("#myForm").serialize(); // console.log(form_data) $.ajax({ url: "visitor/batchAdd", type: "post", data: form_data, success: function(data) { console.log(data); }, error: function(e) { console.log(e); } }); }); }); </script> </body></html>js學(xué)得terrible… 能夠移除，我的移除是先移除所有的行，重新生成行，比較之前生成的行，少一行。
3. controller定義參數(shù)接收
批量新增實(shí)體類BatchVisitor ，定義集合接收多個(gè)對(duì)象
package cn.bitqian.entity;import java.util.ArrayList;import java.util.List;/** * 批量新增 visitorInfo * @author echo lovely * */public class BatchVisitor { private List<VisitorInfo> visitorList = new ArrayList<>(); public List<VisitorInfo> getVisitorList() { return visitorList; } public void setVisitorList(List<VisitorInfo> visitorList) { this.visitorList = visitorList; } public BatchVisitor() {}}controller方法，放實(shí)體類，實(shí)體類里面套VisitorInfo的集合
@RequestMapping(value="/batchAdd", method=RequestMethod.POST) @ResponseBody public VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) { List<VisitorInfo> visitorList = batchVisitor.getVisitorList(); // System.out.println(batchVisitor); for (VisitorInfo visitorInfo : visitorList) { System.out.println(visitorInfo); visitorInfoService.save(visitorInfo); } return new VisitorInfo(1, "dd", "bb", new Date(), 1, 2); }對(duì)于上面響應(yīng)了對(duì)象到頁(yè)面，會(huì)報(bào)錯(cuò)，需要導(dǎo)入json的依賴。
<!-- json 用于響應(yīng) responseBody --> <!-- https://xxx.com/artifact/com.fasterxml.jackson.core/jackson-databind --> <dependency> <groupId>com.fasterxml.jackson.core</groupId> <artifactId>jackson-databind</artifactId> <version>2.9.6</version> </dependency>
接收頁(yè)面的參數(shù)，需要字符串轉(zhuǎn)型為日期，需要
mvc自定義日期轉(zhuǎn)換器
或者加上注解，mvc會(huì)將字符串轉(zhuǎn)換為對(duì)應(yīng)格式的日期
響應(yīng)對(duì)象有日期時(shí)，解決：
到此這篇關(guān)于springmvc 結(jié)合ajax批量新增的文章就介紹到這了,更多相關(guān)springmvc批量新增內(nèi)容請(qǐng)搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！
標(biāo)簽：
Ajax
相關(guān)文章：
1. 淺談SpringMVC jsp前臺(tái)獲取參數(shù)的方式 EL表達(dá)式2. 解決SpringMVC、tomcat、Intellij idea、ajax中文亂碼問(wèn)題3. 基于IDEA創(chuàng)建SpringMVC項(xiàng)目流程圖解4. SpringBoot擴(kuò)展SpringMVC原理并實(shí)現(xiàn)全面接管5. SpringBoot與SpringMVC中參數(shù)傳遞的原理解析6. Spring+SpringMVC+Hibernate整合實(shí)例講解7. SpringMVC生成的驗(yàn)證碼圖片不顯示問(wèn)題及解決方法8. SpringMVC注解之@ResponseBody注解原理9. SpringMVC+Jquery實(shí)現(xiàn)Ajax功能10. 在IntelliJ IDEA 搭建springmvc項(xiàng)目配置debug的教程詳解
排行榜
網(wǎng)公網(wǎng)安備