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

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

请求报文分类

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

<form
    action="http://localhost:10020/query"
    method="POST"
    enctype="multipart/form-data"
>
    <input type="text" name="name" />
    <input type="text" name="age" />
    <button type="submit">提交</button>
</form>

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

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

<form action="http://localhost:10020/query" method="POST">
    <input type="text" name="name" />
    <input type="text" name="age" />
    <button type="submit">提交</button>
</form>

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;
}