Lichord

学习笔记

0%

Axios传递数据注意事项

发表于 更新于 分类于

jQuery.ajax的post提交默认的请求头的Content-Type: application/x-www-form-urlencoded 。相当于(username=”admin”&password=123)来传递数据（这是GET请求的固定格式）

而axios.post提交的请求头是Content-Type: application/json。

不同的请求头发送给springmvc处理方式也不相同

application/x-www-form-urlencoded

前端

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var user= {
                "username" : username,
                "password" : password,
                "rememberMe":rememberMe
          };
$.ajax({
    url : "http://...../jsontest.do",
    type : "POST",
    async : true,
    data : user,
    dataType : 'json',
    success : function(data) {
    }
});

后端

1
2
3
4
5
6
7
8
@RequestMapping("/jsontest.do")
public void test(User user,String username,String password,Boolean rememberMe){
    System.out.println(user);
    System.out.println("username: " + username);
    System.out.println("password: " + password);
    System.out.println("rememberMe: " + rememberMe);
    
}
优点：
  1. 前端传递数据不用转换为json字符串：JSON.stringify(user)
  2. 后端接受的参数很灵活，即可以封装为User对象，亦可以使用单个参数username,rememberMe，甚至User对象和单个rememberMe参数混合使用都可以

application/json

前端：必须要将JSON对象转换为JSON字符串

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var user= {
                "username" : username,
                "password" : password
          };
$.ajax({
        url : "http://...../jsontest.do",
        type : "POST",
        async : true,
        contentType: "application/json; charset=utf-8",
        data : JSON.stringify(user),
        dataType : 'json',
        success : function(data) {
        }
 });

后端 所有的参数都只能封装在对象中，不能单独设置参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
@RequestMapping("/jsontest")
public void test(@RequestBody User user  ){
    String username = user.getUsername();
    String password = user.getPassword();
}

或者

@RequestMapping("/jsontest")
public void test(@RequestBody Map map  ){
    String username = map.get("username").toString();
    String password = map.get("password").toString();
}

或者

 public void test(@RequestBody String jsonData) {
    JSONObject jsonObject = JSON.parseObject(jsonData);
    String username= jsonObject.getString("username");
    String username= jsonObject.getString("password");
 }

ajax改成axios

ajax

1
2
3
4
5
6
7
8
9
10
var data = {age: 18};
$.ajax({
    url: '',
    type: 'POST',
    data: data
    dataType: 'json',
    success: function(result) {
        // do something
    }
})

axios

1
2
3
4
5
6
7
8
9
10
11
12
13
import axios from 'axios';
import qs from 'qs';

var data = {age: 18};
var url = '';

axios.post(
    url, 
    qs.stringify(data), 
    {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}
).then(result => {
    // do something
})

axios POST数据三种请求方式

Content-Type: application/json

1
2
3
4
5
6
import axios from 'axios'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

Content-Type: multipart/form-data

1
2
3
4
5
6
7
8
import axios from 'axios'
let data = new FormData();
data.append('code','1234');
data.append('name','yyyy');
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
    console.log('res=>',res);            
})

Content-Type: application/x-www-form-urlencoded

1
2
3
4
5
6
7
8
9
import axios from 'axios'
import qs from 'Qs'
let data = {"code":"1234","name":"yyyy"};
axios.post(`${this.$url}/test/testRequest`,qs.stringify({
    data
}))
.then(res=>{
    console.log('res=>',res);            
})