首頁 > web前端 > js教程 > 實作springmvc結合ajax批量新增的方法

實作springmvc結合ajax批量新增的方法

coldplay.xixi
發布: 2020-11-26 17:38:26
轉載
3342 人瀏覽過

ajax影片教學欄位主要介紹了springmvc結合ajax批次新增的實作方法

實作springmvc結合ajax批量新增的方法

##推薦(免費):ajax影片教學

1.需要注意的問題

    mvc框架的處理日期問題
  • @ResponseBody回應對像是自訂對象,回應不是json
  • @ResopnseBody回應自訂物件時,日期為是long類型的數字
  • 結束資料方法的參數,該如何定義?接收多個物件?
2. 頁面程式碼

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"%>

 

<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>时间</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(&#39;click&#39;, &#39;.remove&#39;, 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=&#39;text&#39; name=&#39;visitorList[" + i + "].name&#39;/>" +

                                "</td>" +  

                                     

                                "<td>" +  

                                "   <input type=&#39;text&#39; name=&#39;visitorList[" + i + "].cardNo&#39;/>" +

                                "</td>" +  

                                 

                                "<td>" +  

                                "   <input type=&#39;date&#39; name=&#39;visitorList[" + i + "].visitorTime&#39;/>" +

                                "</td>" +

                             

                                "<td>" +

                                "   <input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + i + "].direction&#39;/>进入" +

                                "   <input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + i + "].direction&#39;/>离开" +

                                "</td>" +                

                             

                                "<td>" +      

                                "   <input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + i + "].type&#39;/> 内部" +

                                "   <input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + i + "].type&#39;/> 外部" +

                                "</td>" +

                     

                                "<td>" +

                                "   <input class=&#39;remove&#39; type=&#39;button&#39; value=&#39;移除&#39;>" +

                                "</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=&#39;text&#39; name=&#39;visitorList[" + index_val + "].name&#39;/>" +

                        "</td>" +  

                             

                        "<td>" +  

                        "   <input type=&#39;text&#39; name=&#39;visitorList[" + index_val + "].cardNo&#39;/>" +

                        "</td>" +  

                         

                        "<td>" +  

                        "   <input type=&#39;date&#39; name=&#39;visitorList[" + index_val + "].visitorTime&#39;/>" +

                        "</td>" +

                     

                        "<td>" +

                        "   <input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + index_val + "].direction&#39;/>进入" +

                        "   <input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + index_val + "].direction&#39;/>离开" +

                        "</td>" +                

                     

                        "<td>" +      

                        "   <input type=&#39;radio&#39; value=&#39;1&#39; name=&#39;visitorList[" + index_val + "].type&#39;/> 内部" +

                        "   <input type=&#39;radio&#39; value=&#39;2&#39; name=&#39;visitorList[" + index_val + "].type&#39;/> 外部" +

                        "</td>" +

             

                        "<td>" +

                        "   <input class=&#39;remove&#39; type=&#39;button&#39; value=&#39;移除&#39;>" +

                        "</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學得terrible… 能夠移除,我的移除是先移除所有的行,重新產生行,比較先前產生的行,少一行。

3. 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<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);

    }

登入後複製

對於上面回應了物件到頁面,會報錯,需要導入json的依賴。

1

2

3

4

5

6

7

<!-- json 用于响应 responseBody -->

    <!-- 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批量新增的方法

######## #

以上是實作springmvc結合ajax批量新增的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板