一、Springboot接参注解
1、@RequestBody注解
- 该注解，用来接收前端传过来的json串.
2、@PathVariable(“”)
- 该注解，用来接收url中占位符的参数.
3、@RequestParam(“”)
- 这个注解，就是底层默认的方式.从url中获取参数.
- （用不用都差不多，用了的话、可以解决前后端参数不一问题。比如传来参数a，指定a赋值给b.）
4、接参不写注解的情况下
- 控制器会将url中的参数，自动映射到对象同名属性上.
- 比如user有三个属性：id，username，password.前端传来id，则url中的id，自动赋值给user对象的属性id.
注：三者都较为常用.
二、前端提交数据方式
注：form表单直接提交、通常用在同步情况下.也就是页面和数据一起加载情况下
（前端通过request.setA**（前端采用<% reqeust.%>、<%=%>表达式接参.配合el、jstl）、cookie、Model（前端采用el接参）、ModelAndView返回数据）.这种较为老旧的技术.
1、form表单直接提交
- 直接通过action提交数据，则默认采用get方法提交.参数会被url所携带
- 采用post，参数会被隐式放在body中.f12就可以看到
2、ajax异步（主流）
2.1、第一种提交json方式
//第一种方法
function hello1() {
$.ajax(
{
url: "/hello4",
type: "post",
data: JSON.stringify({
"id": "1", "username": "123", "password": "123"
}),
contentType: 'application/json;charset=UTF-8',
// dataType: "JSON",如果写json的话，前端必须返回json才能接收。
// dataType: "JSON",
async: true,
}
).done(function (resp) {
alert(resp)
}).fail(function (resp) {
alert(resp)
})
}2.2、第二种提交json方式
//第二种方法
function hello2() {
$.ajax(
{
url: "/hello4",
type: "post",
data: JSON.stringify({
"id": "1", "username": "123", "password": "123"
}),
contentType: 'application/json;charset=UTF-8',
// dataType: "JSON",如果写json的话，前端必须返回json才能接收。
async: true,
success: function (resp) {
alert(resp)
}
, error: function (resp) {
alert(resp)
}
}
)
}2.3、ajax+表单序列化
注：这两种序列化，后端都可以直接接收.不需要注解.
- 第一种，表单内容序列化成数组，数组中的元素为objec对象.
var data = $(".login").serializeArray();
- 第二种，表单内容序列化成字符串（实质就是将参数拼接成字符串）
var string = $(".login").serialize();
2.4、form表单封装成json
$("#login1").click(function () {
//表单序列化、serializeObject(),将表单数据转化json串！！！！！
var serializeObject = $(".login").serializeObject();
alert(JSON.stringify(serializeObject))
})
/**
* 自动将form表单封装成json对象
*/
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};2.5、前端完整代码.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<button onclick="hello1()">第一种提交json方式</button>
<button onclick="hello2()">第二种提交json方式</button>
<form class="login" onsubmit="return false">
<input type="text" name="id"><br>
<input type="text" name="username"><br>
<input type="text" name="password">
<button id="login">提交表单序列化内容</button>
</form>
<hr>
<form class="login1" onsubmit="return false">
<input type="text" name="id"><br>
<input type="text" name="username"><br>
<input type="text" name="password">
<button id="login1">提交表单json</button>
</form>
<script>
// 两种提交json方法、json放在body中.form放在url/请求体.
//第一种方法
function hello1() {
$.ajax(
{
url: "/hello4",
type: "post",
data: JSON.stringify({
"id": "1", "username": "123", "password": "123"
}),
contentType: 'application/json;charset=UTF-8',
// dataType: "JSON",如果写json的话，前端必须返回json才能接收。
// dataType: "JSON",
async: true,
}
).done(function (resp) {
alert(resp)
}).fail(function (resp) {
alert(resp)
})
}
//第二种方法
function hello2() {
$.ajax(
{
url: "/hello4",
type: "post",
data: JSON.stringify({
"id": "1", "username": "123", "password": "123"
}),
contentType: 'application/json;charset=UTF-8',
// dataType: "JSON",如果写json的话，前端必须返回json才能接收。
async: true,
success: function (resp) {
alert(resp)
}
, error: function (resp) {
alert(resp)
}
}
)
}
$("#login").click(function () {
//表单序列化、serializeArray()序列化成对象，serialize()参数字符串拼接
var data = $(".login").serializeArray();
alert(data)
var string = $(".login").serialize();
alert(string)
$.ajax({
url: "/hello5",
type: "post",
data: data,
success: function (resp) {
alert(resp)
}
})
})
$("#login1").click(function () {
//表单序列化、serializeObject(),将表单数据转化json串！！！！！
var serializeObject = $(".login").serializeObject();
alert(JSON.stringify(serializeObject))
})
/**
* 自动将form表单封装成json对象
*/
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};
</script>
</body>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
