1、前端页面使用ajax技术发送json数据格式到后端控制器的格式
对应的触发点击事件的html按钮
1.1、前端:使用jquery操作dom绑定事件,并发送ajax请求到后端的格式,json格式为对象
部分代码:
//发送ajax请求到后端控制器,获取数据并写回到页面
$('.search').click(function () {
//获取表单数值
let id = $("#id").val();
let warehousename = $("#warehousename").val();
//初始化json字符串
let myData={"id":id,"warehousename":warehousename}
//完整ajax请求
$.ajax({
url:'/house/search',//后台接口地址
type:'post',//请求方式,一般为get、post
dataType:'json',//表示返回的数据必须为json,否则:会走下面error对应的方法。
contentType:'application/json;charset=utf-8',//如果要发送json字符串,此属性不能少;否则,会出现后台会报异常
data:JSON.stringify(myData),//将json对象转换为json字符串
// async:false,关闭异步
//请求成功后的回调方法
success:function (data) {
if (data.code===200){
//先将html标签内的数据清空
$('#data-list').empty()
//获取到统一返回类型里面的数据
let orders = data.data
//遍历数据
for (let o of orders) {
//往html标签里面放数据
$('#data-list').append('<tr><td>'+o.id+'</td><td>'+o.warehousename+'</td><td>'
+o.consignee+'</td><td>'+o.ename+'</td><td>'+o.outbounddate+'</td><td></td></tr>')
}
}else {
alert("查询失败!")
}
},
//请求失败后的回调方法
error:function () {
alert("查询失败!")
}
})
})
1.2、后端:接收前端ajax请求发送的json数据格式(单个对象),并返回给前端处理结果的代码
部分代码详情:
@RestController
@RequestMapping("/house")
public class WareHouseController {
@Autowired private OutboundOrderService outboundOrderService;
/**
* 使用@RequestBody注解接收前端传递的json数据格式
* 使用该注解需要注意,前端的json数据必须包含参数对象的所有属性,否则报错
* @param outboundOrder
* @return
* @throws SQLException
*/
@PostMapping("/search")
public String selectOrders(@RequestBody OutboundOrder outboundOrder) throws SQLException {
System.out.println("开始查询。。。");
List<OutboundOrder> orders = outboundOrderService.selectOrdersByIdAndName(outboundOrder);
//返回统一返回类型到后端ajax发起者
if (orders.size()>=1){
//注意返回值类型必须是字符串,因此我们需要把返回值转换为json格式的字符串
//否则前端无法接收到数据也更无法调用成功/失败回调方法
return JSON.toJSONString(ResultBean.success(orders));
}else {
return JSON.toJSONString(ResultBean.error(500,"查询失败!"));
}
}
}
2、如果前端ajax需要发送复杂类型的json数据,比如对象里面包含另一个对象或集合,格式该怎么写呢?
Ajax的其他部分格式基本一致,只需要注意data部分,也就是只需要关注json的格式
2.1、对象里面包含另一个对象的json格式写法
比如现在有一个教室类(属性 Integer floor,属性Student student),学生类(属性String name)
那么这个教室的某个对象的json格式就是:
{“floor”:2, “student”:{“name”:“李世纪”}}
2.2、对象里面包含一个集合的json格式写法
比如现在有一个教室类(属性 Integer floor,属性List students),学生类(属性String name),假设位于二层的教室里面有三个学生
那么这个二层教室的json格式就是:
{“floor”:2, “students”:[{“name”:“李世纪”},{“name”:“李嘉歌”},{“name”:“李奕涵”}]}
3、后端使用@RequestBody注解时
需要注意,该注解可以暂时理解为专门用于接收前端请求发送的json数据格式的数据,也就是用来处理Content-Type不是application/x-www-form-urlencoded编码的内容,例如application/json, application/xml等
- @RequestBody是作用在形参列表上
- 将前台发送过来固定格式的数据( xml 格式或者 json等) 封装为对应的 JavaBean 对象,封装时使用到的一个对象是系统默认配置的 HttpMessageConverter进行解析,然后封装到形参上。
3、注意json的属性必须包含后端方法所需参数对象的所有属性,否则报错
4、后端方法的返回值注意必须是json字符串,否则ajax的成功/失败回调函数不会起作用
前后端代码参考上面!!