使用axios.post()传递多个参数时出现中文乱码问题

方式一

var vm=new Vue({
    el:"#app",
    data:{
        id:"",
        name:"",
        age:"",
    },
    methods:{ 
        getStudentInf(){
        axios.post(
            "servelt02.do",//处理路径
            {
              id:"a0022",
              name:"李思思"
            }//传递的参数,这是官方推荐的格式
        ).then(result=>{
            result = result.data;
            this.id = result.id;
            this.name = result.name;
            this.age = result.age;
        })
    },
},
})

结果:

servelt接收参数情况:

采用:req.getParameter()接收

查看请求头:

结论:

可见,发送的数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参。

方式二:

var vm=new Vue({
    el:"#app",
    data:{
        id:"",
        name:"",
        age:"",
    },
    methods:{ 
        getStudentInf(){
        axios.post(
            "servelt02.do",//处理路径
           "id=a0022&name=李思思"//传递的参数,直接用字符串格式
        ).then(result=>{
            result = result.data;
            this.id = result.id;
            this.name = result.name;
            this.age = result.age;
        })
    },
},
})

结果:servelt接收参数情况:

采用:req.getParameter()接收

查看请求头:

 

结论:

此时传递参数的格式是FormData,但对应servelt接收到的汉字数据却乱码,可能是由于Content-Type中不是charset=utf-8

方式三:

var vm=new Vue({
    el:"#app",
    data:{
        id:"",
        name:"",
        age:"",
    },
    methods:{ 
        getStudentInf(){
            let params = new URLSearchParams();
            params.append('id', "a0022");
            params.append('name', "李思思"); 
       axios.post(
            "servelt02.do",//处理路径
             params//传递的参数,使用URLSearchParams预先对请求参数进行格式处理
        ).then(result=>{
            result = result.data;
            this.id = result.id;
            this.name = result.name;
            this.age = result.age;
        })
    },
},
})

结果:成功

采用:req.getParameter()接收

查看请求头:

方式四:

经过查阅资料,我发现浏览器在以get和post两种请求方式发送请求的时候,分别在http请求协议包中请求头和请求体中携带的参数在以二进制的形式到达HTTP服务器的时候,在Servelt接口实现类中解释的时候会有所不同。

get方式:由http服务器(eg:Tomcat)来解析,在tomcat9.0版本默认以utf-8的字符集来解释。

post方式:由请求对象request 来解析,默认以【ISO-8859-1】来解释,一个东欧系字符集,如果此时传递的有中文,就会出现乱码。

解决方式:

在对应servelt的dopost()方法里面添加

req.setCharacterEncoding("utf-8");

注意:是在请求获得参数的前面。

### 使用 Axios 发送带参数的 HTTP POST 请求 Axios 是一个流行的 JavaScript 库,用于发起 HTTP 请求。对于发送带有参数POST 请求,可以通过配置 `data` 属性来实现。 当需要向服务器提交数据,通常会构建一个对象作为请求体的一部分。下面是一个具体的例子: ```javascript const axios = require('axios'); // 定义要发送的数据 const postData = { firstName: 'Fred', lastName: 'Flintstone' }; // 发起 POST 请求并携带数据 axios.post('/user', postData) .then((response) => console.log(response.data)) .catch((error) => console.error(error)); ``` 在这个实例中,`postData` 对象包含了想要传递给服务器的信息,并通过第二个参数的形式传入到了 `post()` 方法里[^1]。 如果希望更灵活地设置请求头或其他选项,则可以在第三个参数位置提供额外的配置项: ```javascript axios.post('/user', postData, { headers: {'Content-Type': 'application/json'} }) .then((response) => console.log(response.data)) .catch((error) => console.error(error)); ``` 这里指定了 Content-Type 为 application/json,这告诉服务器客户端正发送 JSON 编码的内容[^4]。 #### 处理表单数据的情况 有也需要上传表单类型的字段,在这种情况下应该创建 FormData 实例并将键值对附加进去: ```javascript let formData = new FormData(); formData.append('username', 'demo'); formData.append('password', 'secret'); axios({ method: 'post', url: '/login', data: formData, config: { headers: {'Content-Type': 'multipart/form-data' }} }).then(function (res){ console.log(res); }); ``` 这段代码展示了如何利用 `FormData` API 来准备表单风格的有效载荷,并适当调整了请求头部以匹配预期的内容类型。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值