页面ajax请求传参及java后端数据接收

119 阅读 0 评论 79 点赞

我是靠谱客的博主长情帅哥，最近开发中收集的这篇文章主要介绍页面ajax请求传参及java后端数据接收，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

js ajax请求传参及java后端数据接收


1 Controller：

2 package com.ysl.PassingParameters.controller;

3 import java.util.List;

4 import java.util.Map;

5

6 import org.springframework.stereotype.Controller;

7 import org.springframework.web.bind.annotation.RequestBody;

8 import org.springframework.web.bind.annotation.RequestMapping;

9 import org.springframework.web.bind.annotation.RequestParam;
 10 import org.springframework.web.bind.annotation.ResponseBody;
 11
 12 import com.ysl.PassingParameters.bean.User;
 13 import com.ysl.PassingParameters.dto.RetMsg;
 14
 15 @Controller
 16 public class TestController {
 17
 18
/**
 19 
* List<String>传参
 20 
* @param listString
 21 
* @return
 22
*/
 23
@RequestMapping("/listString")
 24 
@ResponseBody
 25
public RetMsg listString(@RequestParam("listString[]") List<String> listString){
 26
System.out.println("listString:"+listString.toString());
 27
return RetMsg.success();
 28 
}
 29
 30
 31
/**
 32 
* List<User>传参
 33 
* @param listUser
 34 
* @return
 35
*/
 36
@RequestMapping("/listUsers")
 37 
@ResponseBody
 38
public RetMsg listUsers(@RequestBody List<User> listUser){
 39
System.out.println("username:"+listUser.get(0).getUsername());
 40
return RetMsg.success();
 41 
}
 42
 43
 44
/**
 45 
* User[]传参
 46 
* @param arrayUsers
 47 
* @return
 48
*/
 49
@RequestMapping("/arrayUsers")
 50 
@ResponseBody
 51 
public RetMsg arrayUsers(@RequestBody User[] arrayUsers){
 52
System.out.println("username:"+arrayUsers[0].getUsername());
 53
return RetMsg.success();
 54 
}
 55
 56
 57
/**
 58 
* List<Map<String,Object>>传参
 59 
* @param listMap
 60 
* @return
 61
*/
 62
@RequestMapping("/listMap")
 63 
@ResponseBody
 64
public RetMsg listMap(@RequestBody List<Map<String, String>> listMap){
 65
System.out.println("username:"+listMap.get(0).get("username"));
 66
return RetMsg.success();
 67 
}
 68
 69
/**
 70 
* User对象传参
 71 
* @param arrayUsers
 72 
* @return
 73
*/
 74
@RequestMapping("/users")
 75 
@ResponseBody
 76 
public RetMsg users(@RequestBody User users){
 77
System.out.println("username:"+users.getUsername());
 78
System.out.println("username:"+users.getList().get(0).getUsername());
 79
return RetMsg.success();
 80 
}
 81 }
 82 页面：
 83 <%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
 84 <html>
 85 <%application.setAttribute("path", request.getContextPath());%>
 86 <head>
 87
<script type="text/javascript" src="${path}/js/jquery.min.js"></script>
 88 </head>
 89 <body>
 90 <h2>Hello World!</h2>
 91 <button id="listString">List&lt;String&gt;传参</button>
 92 <button id="listUser">List&lt;User&gt;传参</button>
 93 <button id="arrayUsers">User[]传参</button>
 94 <button id="listMap">List&lt;Map&lt;String,Object&gt;&gt;传参</button>
 95 <button id="Users">User对象（属性包含List&lt;User&gt;）传参</button>
 96 <script type="text/javascript">
 97
 98
// List<String>传参
 99
$("#listString").click(function(){
100
var idList = new Array();
101
idList.push("1");
102
idList.push("1");
103
idList.push("1");
104 
$.ajax({
105
type:"post",
106
url:"${path}/listString",
107
data:{"listString":idList},
108
dataType:"json",
109
success:function(retMsg){
110
if(retMsg.code==200){
111
alert("success");
112
}else{
113
alert("false");
114 
}
115 
}
116 
})
117 
})
118
119
// List<User>传参
120
$("#listUser").click(function(){
121
var userList = new Array();
122
userList.push({username: "zhangsan",password: "332"});
123
userList.push({username: "zhangsan",password: "332"});
124 
$.ajax({
125
type:"post",
126
url:"${path}/listUsers",
127 
data:JSON.stringify(userList),
128
dataType:"json",
129
contentType : 'application/json;charset=utf-8', //设置请求头信息

130
success:function(retMsg){
131
if(retMsg.code==200){
132
alert("success");
133
}else{
134
alert("false");
135 
}
136 
}
137 
})
138 
})
139
140
141
//传User对象数组
142
$("#arrayUsers").click(function(){
143
var userList = [{username: "李四",password: "123"},{username: "张三",password: "332"}];
144 
$.ajax({
145
type: "POST",
146
url: "${path}/arrayUsers",
147
data: JSON.stringify(userList),//将对象序列化成JSON字符串

148
dataType:"json",
149
contentType : 'application/json;charset=utf-8', //设置请求头信息

150
success:function(retMsg){
151
if(retMsg.code==200){
152
alert("success");
153
}else{
154
alert("false");
155 
}
156 
}
157 
});
158 
})
159
160
// List<Map<String,Object>>传参
161
$("#listMap").click(function(){
162
var userList = new Array();
163
userList.push({username: "zhangsan",password: "332"});
164
userList.push({username: "zhangsan",password: "332"});
165 
$.ajax({
166
type:"post",
167
url:"${path}/listMap",
168 
data:JSON.stringify(userList),
169
dataType:"json",
170
contentType : 'application/json;charset=utf-8', //设置请求头信息

171
success:function(retMsg){
172
if(retMsg.code==200){
173
alert("success");
174
}else{
175
alert("false");
176 
}
177 
}
178 
})
179 
})
180
181
//User对象传参
182
$("#Users").click(function(){
183
var list = new Array();
184
list.push({username: "zhangsan",password: "332"});
185
list.push({username: "zhangsan",password: "332"});
186
var user = {};
187
user.username = "张三";
188
user.password = "密码";
189
user.list = list;
190 
$.ajax({
191
type:"post",
192
url:"users",
193 
data:JSON.stringify(user),
194
datatype:"json",
195
contentType:"application/json;charset=utf-8",
196
success:function(retMsg){
197
if(retMsg.code==200){
198
alert("success");
199
}else{
200
alert("false");
201 
}
202 
}
203 
})
204 
})
205 </script>
206 </body>
207 </html>