筑坐极_前端向后端传值的方式

一、将请求参数拼接在请求地址(url)后

通过a标签的href属性提交数据（a标签只能访问GET的端口）。

①无参数访问

前端html示例：

<a href="http://localhost:8081/datatransfer/dt1">无参数GET本地访问</a>

后端Controller示例：

@GetMapping("dt1")
public JsonPojo dt1(Integer id){
    return new JsonPojo(1,"查询成功(dt1)",id);
}

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt1)",
    "data": null
}

②带参数访问

前端html示例：

多个参数以&连接。

<a href="http://localhost:8081/datatransfer/dt2?id=1008&sort=desc">携带多个参数GET本地访问</a>

后端Controller示例：

@GetMapping("dt2")
public JsonPojo dt2(@RequestParam("id") Integer pid,String sort){
    return new JsonPojo(1,"查询成功(dt2)",pid + "-" + sort);
}

@RequestParam 绑定的是从前端传递的参数，在后端如果将其命名为pid，则需要以pid进行编写。

@RequestParam：将请求参数绑定到Controller参数上（是springmvc中接收普通参数的注解）。接收的参数来自HTTP请求体或请求url的参数串。

语法：@RequestParam( value = "参数名" , required = "true/false" , defaultValue = "" )

value：为接收url的参数名（相当于key值）。

required：是否包含该参数，默认为true，表示该请求路径中必须包含该参数，如果不包含就报错。

defaultValue：默认参数值，如果设置了该值，required=true将失效，自动为false,如果没有传该参数，就使用默认值。

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt2)",
    "data": "1006-desc"
}

二、通过form表单提交

将需要传递的数据填入input输入框。

在后端可通过对应的name属性获取相应的值。

form表单中的action属性标识提交数据的地址。

method属性指明表单提交的方式。

前端html示例：

<form action="http://localhost:8081/datatransfer/dt3" method="post">
    <input type="text" name="id" placeholder="id">
    <input type="text" name="sort" placeholder="sort">
    <button type="submit">携带多个参数POST本地访问</button>
</form>

后端Controller示例：

@PostMapping("dt3")
public JsonPojo dt3(Integer id,String sort){
    return new JsonPojo(1,"查询成功(dt3)",id + "-" + sort);
}

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt3)",
    "data": "1006-desc"
}

三、通过JQuery中的ajax提交

①传递不含文件的参数

前端html示例：

<button onclick="aj1()">AJAX1</button>

前端js示例：

如果不写type，则默认为GET方式。

//根路径
const BASE_URL = "http://localhost:8081";

function aj1() {
    $.ajax({
        url:BASE_URL+"/datatransfer/dt2",
        type:"GET", 
        data:{
            id:"1006",sort:"desc"
        },
        success:function (r) {
            console.log(r);
        }
    })
}

后端Controller示例：

@GetMapping("dt2")
public JsonPojo dt2(@RequestParam("id") Integer pid,String sort){
    return new JsonPojo(1,"查询成功(dt2)",pid + "-" + sort);
}

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt2)",
    "data": "1006-desc"
}

②传递包含文件的参数

传输含有文件的数据，必须放在formData中传递。

前端html示例：

<form>
    <input type="text" id="p1" placeholder="id">
    <input type="text" id="p2" placeholder="sort">
    <input type="file" id="p3">
    <button type="button" onclick="aj3()">传输含文件的参数 AJAX3</button>
</form>

前端js示例：

function aj3() {
    let formData = new FormData();
    formData.append("par1",$("#p1").val());
    formData.append("par2",$("#p2").val());
    formData.append("par3",$("#p3")[0].files[0]);
    //$("#p3")[0] 获取原生对象；files[0] 获取第一个对象

    $.ajax({
        url:BASE_URL+"/datatransfer/dt4",
        type:"POST", 
        data:formData,
        processData: false,//阻止jquery对formData数据进行加工处理
        contentType: false,//阻止jquery修改formData数据的类型
        success:function (r) {
            console.log(r);
        }
    })
}

后端Controller示例：

接收文件使用MultipartFile类型。

@PostMapping("dt4")
public JsonPojo dt4(@RequestParam("par1")String par1,
              @RequestParam("par2")String par2,
             @RequestParam("par3")MultipartFile par3){
    Map<String,Object> map = new HashMap<>();
    map.put("par1",par1);
    map.put("par2",par2);
    map.put("par3-filename",par3.getOriginalFilename());
    return new JsonPojo(1,"查询成功(dt4)",map);
}

返回示例：

{
  "status": 1,
  "msg": "查询成功(dt4)",
  "data": {
    "par1": "1006",
    "par2": "desc",
    "par3-filename": "间谍过家家.jpg"
   }
}

③拼接动态url

前端html示例：

<button onclick="aj4()">AJAX4</button>

前端js示例：

function aj4() {
    let myName = "Hello";
    $.ajax({
        url:BASE_URL+`/datatransfer/${myName}/dt5`,
        type:"GET", 
        success:function (r) {
            console.log(r);
        }
    })
}

后端Controller示例：

@GetMapping("/{username}/dt5")
public JsonPojo dt5(@PathVariable("username") String n){
    return new JsonPojo(1,"查询成功(dt5)",n);
}

@PathVariable 映射 URL 绑定的占位符。
通过@PathVariable可以将 URL 中占位符参数绑定到控制器处理方法的入参中。

即是说，URL 中的 {xxx} 占位符可以通过@PathVariable("xxx") 绑定到操作方法的入参中。

如果操作方法的参数名称和需要绑定的url中变量名称一致时,可以不写括号及括号内的名称。

返回示例：

{
  "status": 1,
  "msg": "查询成功(dt5)",
  "data": "Hello"
}

④将 Map类型的数据转为字符串传递参数 && 拼接url传递参数

前端html示例：

<button onclick="aj5()">AJAX5</button>

前端js示例：

contentType：前端传给后端的数据类型

dataType：前端期望后端传回的数据类型

function aj5() {
    let info = {
        username:"小李",
        pwd:"123456",
        age:12
    };

    $.ajax({
        url:BASE_URL+`/datatransfer/dt6?id=1006`,
        type:"POST", 
        data:JSON.stringify(info),//将 info 变成字符串传递
        contentType:"application/json", //传给后端的数据类型
        success:function (r) {
            console.log(r);
        }
    })
}

后端Controller示例：

@PostMapping(value = "dt6",produces = "application/json;charset=utf-8")
public JsonPojo dt6(@RequestBody Map<String,Object> map,@RequestParam("id")String i){
    Map<String, Object> data = new HashMap<>();
    data.put("param_json", map);
    data.put("id", i);

    return new JsonPojo(1,"查询成功(dt6)",data);
}

@RequestBody主要用来接收前端传递给后端的json字符串中的数据(请求体中的数据)。

使用@RequestBody接收数据时，多用POST方式进行提交。

在后端的同一个接收方法里，@RequestBody与@RequestParam()可以同时使用， @RequestBody最多只能有一个，而@RequestParam()可以有多个。

Postman测试示例：

前端向后端传值的方式

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt6)",
    "data": {
        "id": "1006",
        "param_json": {
            "age": 12,
            "pwd": "123456",
            "username": "小李",
        }
    }
}

⑤将数组类型的数据转为字符串传递参数 && 拼接url传递参数

前端html示例：

<button onclick="aj6()">AJAX6</button>

前端js示例：

function aj6() {
    let info = [
        {
        username:"小李",
         pwd:"123456",
         age:12
         },
         {
        username:"小周",
         pwd:"654321",
         age:21
         }
       ];

    $.ajax({
      url:BASE_URL+`/datatransfer/dt7?id=1006`,
      type:"POST", 
      data:JSON.stringify(info),//将 info 变成字符串传递
      contentType:"application/json", //传给后端的数据类型
      success:function (r) {
            console.log(r);
      }
    })
}

后端Controller示例：

@PostMapping(value = "dt7",produces = "application/json;charset=utf-8")
public JsonPojo dt7(@RequestBody List<Map<String,Object>> li, 
                    @RequestParam("id")String i){
    Map<String, Object> map = new HashMap<>();
    map.put("param_json", li);
    map.put("id", i);

    return new JsonPojo(1,"查询成功(dt7)",map);
}

返回示例：

{
    "status": 1,
    "msg": "查询成功(dt7)",
    "data": {
        "id": "1006",
         "param_json": [
            {
                "age": 12,
                "pwd": "123456",
                "username": "小李",
            }
            {
                "age": 21,
                "pwd": "654321",
                "username": "小周",
            }
        ]
    }
}

==========END==========

前端向后端传值的方式

常*

java,js,url,ajax

如题。

2023.03.05

647人

常*

天津市河东区

Hot:3558

常*

5分

继续加油哟