web应用常用的几种前后端参数传递方式

电玩女神 2024-04-18 12:24 70阅读 0赞

项目经常使用传参，记录下来学习。

## 请求报文分类 ##

1. url查询参数

GET http://localhost:10020/query?name=%E4%B8%BD%E4%B8%BD&age=123 HTTP/1.1
    //...省略

2. url路径参数，作为url的一部分

GET http://localhost:10020/query/100 HTTP/1.1
    //...省略

3. 作为请求头

GET http://localhost:10020/query HTTP/1.1
    uuid: 123
    age: 123
    //...省略

4. 请求体：multipart/form-data

可以上传文件那种表单提交

GET http://localhost:10020/query HTTP/1.1
    //...省略
    content-type: multipart/form-data; boundary=--------------------------010910135056788723514580
    
    ----------------------------010910135056788723514580
    Content-Disposition: form-data; name="name"
    
    李四
    ----------------------------010910135056788723514580
    Content-Disposition: form-data; name="age"
    
    1213
    ----------------------------010910135056788723514580--

5. 请求体：application/x-www-form-urlencoded

普通的post提交，表单提交，最典型的一种

GET http://localhost:10020/query HTTP/1.1
    //...省略
    Content-Type: application/x-www-form-urlencoded
    
    name=%E6%9D%8E%E5%9B%9B&age=123

6. 请求体：application/json

以json格式提交参数，这种比较适合接口调用

GET http://localhost:10020/query HTTP/1.1
    //...省略
    Content-Type: application/json
    
    {"name":"李四","age":"123"}

## 前端常用调用方式归类 ##

1. url查询参数

$.get("http://localhost:10020/query?name=123&age=456");
    
    
    $.get("http://localhost:10020/query", { name: "张三", age: "456" });
    
    
    <form action="http://localhost:10020/query">
        <input type="text" name="name" />
        <input type="text" name="age" />
        <button type="submit">提交</button>
    </form>

2. url路径参数，作为url的一部分

$.get("http://localhost:10020/query/100");

3. 作为请求头

$.ajax({
        url: "http://localhost:10020/query",
        method: "GET",
        headers: {
            name: "lili",
            age: "123"
        }
    })

4. 请求体：multipart/form-data

5. 请求体：application/x-www-form-urlencoded

$.post("http://localhost:10020/query", { name: "张三", age: "456" });

6. 请求体：application/json

$.ajax({
        url: "http://localhost:10020/query",
        method: "POST",
        headers: {
        "Content-Type": "application/json"
        },
        data: JSON.stringify({ name: "李四", age: "123" })
    }).done(function(response) {
        console.log(response);
    });

## 后台接收参数 ##

1. url查询参数

@GetMapping("/query")
    public int query(String name, String age) {
        System.out.println("age = " + age);
        System.out.println("name = " + name);
    }

@GetMapping("/query")
    public int query(HttpServletRequest request) {
        String name=request.getParameter("name");
        String age=request.getParameter("age");
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        return 1;
    }

@GetMapping("/query")
    public int query(A a) {
        String name=a.getName();
        String age=a.getAge();
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        return 1;
    }
    public class A{
        private String name;
        private String age;
    
        public String getName() {
            return name;
        }
    
        public void setName(String name) {
            this.name = name;
        }
    
        public String getAge() {
            return age;
        }
    
        public void setAge(String age) {
            this.age = age;
        }
    }

2. url路径参数，作为url的一部分

@GetMapping("/query/{id}")
    public int query(@PathVariable Integer id) {
        System.out.println("id = " + id);
        return 1;
    }

3. 作为请求头

@GetMapping("/query")
    public int query(@RequestHeader String uuid,@RequestHeader String name) {
        System.out.println("uuid = " + uuid);
        System.out.println("name = " + name);
        return 1;
    }

@GetMapping("/query")
    public int query(HttpServletRequest request) {
        String uuid=request.getHeader("uuid");
        String name=request.getHeader("name");
        System.out.println("uuid = " + uuid);
        System.out.println("name = " + name);
        return 1;
    }

4. 请求体：multipart/form-data

@PostMapping("/query")
    public int query(A a) {
        String name = a.getName();
        System.out.println("name = " + name);
        String age = a.getAge();
        System.out.println("age = " + age);
        return 1;
    }

@PostMapping("/query")
    public int query(@RequestParam String name,@RequestParam String age) {
        System.out.println("name = " + name);
        System.out.println("age = " + age);
        return 1;
    }

5. 请求体：application/x-www-form-urlencoded

和url查询参数差不多

6. 请求体：application/json

*  封装成map取值

@PostMapping("/query")
    public int query(@RequestBody Map map) {
        String name= MapUtils.getString(map,"name");
        System.out.println("name = " + name);
        String age= MapUtils.getString(map,"age");
        System.out.println("age = " + age);
        return 1;
    }

*  封装成对象取值

@PostMapping("/query")
    public int query(@RequestBody A a) {
        String name= a.getName();
        System.out.println("name = " + name);
        String age= a.getAge();
        System.out.println("age = " + age);
        return 1;
    }

*  传递一个字符串，自己再单独解析

@PostMapping("/query")
    public int query(@RequestBody String  data) {
        System.out.println("data = " + data);
        A a = new Gson().fromJson(data, A.class);
        String name= a.getName();
        System.out.println("name = " + name);
        String age= a.getAge();
        System.out.println("age = " + age);
        return 1;
    }