springmvc结合ajax实现批量增加

双倍开心

于 2021-04-16 14:02:03 发布

阅读量348

点赞数

原文链接：https://blog.51cto.com/u_15154653/2708283

版权

本文主要介绍 springmvc结合 ajax实现批量增加的方法，通过实例代码给大家介绍得非常详细，对大家的学习或工作有一定的参考价值，有需要的朋友可以参考

需要注意的事项

mvc框架的处理日期问题

@ResponseBody响应对象是自定义对象，响应不是json
@ResopnseBody响应自定义对象时，日期为是long类型的数

结束数据方法的参数，该如何定义？接收多个对象？

页面代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
<%@ page language=“java” isELIgnored=“false” contentType=“text/html; charset=UTF-8”
pageEncoding=“UTF-8”%>

ajax批量新增操作

<form id="myForm">
    <table border="1" >
        <tr>
            <td>姓名</td>
            <td>身份证</td>
            <td>时间</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"/>进入
                    <input type="radio" value="2" name="visitorList[0].direction"/>离开
                </td>                 
                 
                <td>
                    <input type="radio" value="1" name="visitorList[0].type"/> 内部
                    <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() {
            // 移除当前行, 通过父级来绑定...
            // $(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'/>进入" +
                            "   <input type='radio' value='2' name='visitorList[" + i + "].direction'/>离开" +
                            "</td>" +                 
                         
                            "<td>" +       
                            "   <input type='radio' value='1' name='visitorList[" + i + "].type'/> 内部" +
                            "   <input type='radio' value='2' name='visitorList[" + i + "].type'/> 外部" +
                            "</td>" +
                 
                            "<td>" +
                            "   <input class='remove' type='button' value='移除'>" +
                            "</td>" +                                     
                             
                        "</tr>";                      
                }
                $("#tbody").append(data_str);
            }
             
            // 把下标减少一 就行了，就是移除了。
            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'/>进入" +
                    "   <input type='radio' value='2' name='visitorList[" + index_val + "].direction'/>离开" +
                    "</td>" +                 
                 
                    "<td>" +       
                    "   <input type='radio' value='1' name='visitorList[" + index_val + "].type'/> 内部" +
                    "   <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>

js学得terrible… 能够移除，我的移除是先移除所有的行，重新生成行，比较之前生成的行，少一行。

controller定义参数接收

批量新增实体类BatchVisitor ，定义集合接收多个对象

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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方法，放实体类，实体类里面套VisitorInfo的集合

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@RequestMapping(value="/batchAdd", method=RequestMethod.POST)
@ResponseBody
public VisitorInfo batchAddVisitor(BatchVisitor batchVisitor) {
List visitorList = batchVisitor.getVisitorList();

    // System.out.println(batchVisitor);
     
    for (VisitorInfo visitorInfo : www.brfgc.com  visitorList) {
        System.out.println(visitorInfo);
         
        visitorInfoService.save(visitorInfo);
    }
     
    return new VisitorInfo(1, "dd", "bb", new Date(), 1, 2);
}

对于上面响应了对象到页面，会报错，需要导入json的依赖。

1
2
3
4
5
6
7

<!-- https://mvnrepository.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>

接收页面的参数，需要字符串转型为日期，需要
mvc自定义日期转换器
或者加上注解，mvc会将字符串转换为对应格式的日期
在这里插入图片描述
响应对象有日期时，解决：

在这里插入图片描述

到此这篇关于springmvc结合 ajax实现批量增加的方法文章就介绍到这了,相关文章可关注脚本之家

双倍开心

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
springmvc结合ajax实现批量增加

本文主要介绍 springmvc结合 ajax实现批量增加的方法，通过实例代码给大家介绍得非常详细，对大家的学习或工作有一定的参考价值，有需要的朋友可以参考需要注意的事项mvc框架的处理日期问题@ResponseBody响应对象是自定义对象，响应不是json@ResopnseBody响应自定义对象时，日期为是long类型的数结束数据方法的参数，该如何定义？接收多个对象？页面代码12345678910111213141516171819202122
复制链接

扫一扫