请求基本样式
ajax请求接口：
(1) 接口：
@RequestMapping(value="/test",method=RequestMethod.POST)
public void test(??????){
}
(2)ajax:
$.ajax({
type:'POST',
url:'/**/test',
contentType:'', //请求数据类型
data:'', //请求数据
dataType:'', //返回数据类型
}) .then(res => {}).catch(err => {})
2.请求最基本的就是get与post
get 的url格式: http://localhost:18081?a=..&b=..&c=..
post 不会将数据直接拼接在url的后面。
3.当前端页面只传回来一个简单的id之类的值时：
(1):
接口Controller可以写成这样：
@RequestMapping(value="/updateTemplatesJsonSave",method = RequestMethod.POST)
@ResponseBody
public void updateJsonSave(@RequestParam("id") Integer id){
System.out.println(id)；
}
->
@RequestMapping(value="/updateTemplatesJsonSave",method = RequestMethod.POST)
@ResponseBody
public void updateJsonSave(Integer id){
System.out.println(id);
}
ajax可以这样写：
type:'post',
url:'/homePageManagement/updateTemplatesJsonSave',
data:'id=' + this.id,
->
let data = {
id : this.id
}
type:'post'
url:'/homePageManagement/updateTemplatesJsonSave',
data:data, //
4.页面传过来多个简单参数的时候
Controller:
@RequestMapping(value="/updateTemplatesJsonSave",method = RequestMethod.POST)
@ResponseBody
public void updateJsonSave(Integer id,Integer od){
System.out.println(id + "===" + od);
}
ajax:
let templates = {
id : this.id,
od : 2
}
只是基于3的简单修改。
当然controller也可以使用@RequestParam注解接收，@RequestParam("id") ttt,这样有个好处就是可以给传过来的参数起别名 id -> ttt
5.get 方法
get方法与post不同的就是需要将变量拼接在url的后面：
Controller：
@RequestMapping(value="/updateTemplatesJsonSave",method = RequestMethod.GET)
ajax：
$.ajax({
type:'get',
url:'/homePageManagement/updateTemplatesJsonSave/?id=' + 1 + "&" + "od=" + 2,
}).then(res => {
alert("修改成功!");
}).catch(err => {
alert("修改失败!");
})
注意：如果od是个多位的小数： url需要这样写： url:'/homePageManagement/updateTemplatesJsonSave/?id=' + 1 + "&" + "od=" + 2 + '/'
6.实体类接收参数
当参数过多，可以创建一个包含这些参数的实体类进行参数的传递，注意一点就是参数名跟实体类中的名字必须相同：
这里需要用到注解:@RequestBody
(1) : 直接使用实体类进行参数传递
Controller:
@RequestMapping(value="/updateTemplatesJsonSave",method = RequestMethod.POST)
@ResponseBody
public void updateJsonSave(JsonTemplates jsonTemplates){
ajax:
methods:{
saveUpdate: function(){
console.log("修改后的json:",this.$refs.jsonTree.json.data)
console.log("模板id:",this.id);
let templates = {
id : this.id,
// content : this.$refs.jsonTree.json.data
}
$.ajax({
type:'post',
url:'/homePageManagement/updateTemplatesJsonSave',
// contentType:'application/json',
//data:'id=' + this.id,
data:templates,
//dataType:'json',
}).then(res => {
alert("修改成功!");
//跳转到修改模板参数
//window.location.href = "";
}).catch(err => {
alert("修改失败!");
})
}
在这里 JsonTemplates实体类中是有许多的字段，前台传入的只有一个id,也正常接收的，但是使用@RequestBody会报错的。
注: @RequestBody 貌似只能是全部的实体类字段与前端参数一一对应。--(待补充)
复杂类型参数的传递
也曾遇到过一些很长的一大串的那种的数据传递，注意一下数据类型，再就是传递的时候转换之类的，如下：
image.png
image.png
数据需要时一个整体，而不是一个一个的数组数据，所以可以使用JSON.stringify() 转换一下。
restful风格
没有仔细研究过restful
请求url格式:
@RequestMapping(value="/updateTemplatesJsonSave/{id}",method = RequestMethod.POST)
public void updateJsonSave(@PathVariable("id") Integer id){}
这种的传值方法只能通过{} 将参数放到url后面，然后使用@PathVariable 注解一个一个的取出来使用，个人感觉适合传递参数不多的时候使用比较方便。
get post put delete -> 查 增 改 删
9.表单提交
表单提交的样式也是挺多的，可以直接给每一个参数name
值，然后在controller中使用@RequestParam() 接收。也可以选中表单，将整张
表单序列化拿到根据name序列化的对象，整个提交。
也有一些需要注意的点：form action为空默认提交到本页面。等等等等。更多的也需要自己使用中多加练习，练多了也就记住了。