當(dāng)前位置：首頁(yè) > 编程语言 > c/c++ >内容正文

c/c++

springmvc 结合ajax批量新增

發(fā)布時(shí)間：2023/12/10 c/c++ 31 豆豆

生活随笔收集整理的這篇文章主要介紹了 springmvc 结合ajax批量新增小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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><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 class="remove" 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() {// 自增1index_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í)體類VisitorInfo

package cn.bitqian.entity;import java.util.Date;import javax.persistence.Column; import javax.persistence.Entity; import javax.persistence.GeneratedValue; import javax.persistence.GenerationType; import javax.persistence.Id; import javax.persistence.Table;import org.springframework.format.annotation.DateTimeFormat;import com.fasterxml.jackson.annotation.JsonFormat;@Table(name="visit_info") @Entity(name="VisitorInfo") public class VisitorInfo {@Id@GeneratedValue(strategy=GenerationType.AUTO)private Integer id;private String name;@Column(name="card_no")private String cardNo;@Column(name="visitor_time") // datetime@DateTimeFormat(pattern="yyyy-MM-dd") // 頁(yè)面提交來(lái)的@JsonFormat(pattern="yyyy-MM-dd") // 服務(wù)器響應(yīng)回來(lái)的json日期格式private Date visitorTime;private Integer direction; // 1進(jìn)入 2 離開(kāi)private Integer type; // 1. 內(nèi)部 2. 外部public VisitorInfo() {}public VisitorInfo(Integer id, String name, String cardNo, Date visitorTime, Integer direction, Integer type) {super();this.id = id;this.name = name;this.cardNo = cardNo;this.visitorTime = visitorTime;this.direction = direction;this.type = type;}// setter/getter 省略}

批量新增實(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)@ResponseBodypublic 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的依賴。

<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í)，解決：

總結(jié)

以上是生活随笔為你收集整理的springmvc 结合ajax批量新增的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇：闪电shader_【Shader案例】怎
下一篇： JavaScript — json文件的