关于ajax请求Controller传值问题详细记录

1. 请求基本样式
   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 貌似只能是全部的实体类字段与前端参数一一对应。--（待补充）

7. 复杂类型参数的传递

   也曾遇到过一些很长的一大串的那种的数据传递，注意一下数据类型，再就是传递的时候转换之类的，如下：
   

image.png image.png

数据需要时一个整体，而不是一个一个的数组数据，所以可以使用JSON.stringify() 转换一下。

8. 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为空默认提交到本页面。等等等等。更多的也需要自己使用中多加练习，练多了也就记住了。