使用vue发ajax请求传递字符串（get , post）

huangjin99

已于 2023-11-09 14:25:59 修改

阅读量802

点赞数 7

文章标签： vue.js ajax 前端

于 2023-11-09 14:24:34 首次发布

本文链接：https://blog.csdn.net/qq_44073138/article/details/134310723

版权

本文介绍了在JavaScript中使用axios库发送HTTP请求，包括GET请求的params传参方式，以及POST请求的JSON数据和字符串形式的参数处理，同时提及了URL拼接的局限性及qs包的使用。

摘要由CSDN通过智能技术生成

1.get请求 , params传参

 			const sClientId = '你的参数'
            const cmd = '你的参数'
            const para1 = '你的参数'
            const para2 = '你的参数'
            const para3 = '你的参数'

            axios.get('/你的url', {
                
                params: {
                    sClientId: sClientId,
                    cmd: cmd,
                    para1: para1,
                    para2: para2,
                    para3: para3,
                }

            })
                .then(res => {
                ...log你的res.data
                               
            })
                .catch(error => {
                    // 请求失败时的处理
                    console.log(error);
                    if (error.response) {
                        // 请求已发出，但服务器响应的状态码不在 200 范围内
                        console.log(error.response.data);
                        console.log(error.response.status);
                        console.log(error.response.headers);
                    } else {
                        console.log("Error", error.message);
                    }
                    console.log(error.config);
                });

地址拼接传参：

/你的url?sClientId=你的参数&cmd=你的参数&para1=你的参数&para2=你的参数...  不好玩，用params

2.post传参—JSON数据

			const sClientId = '你的参数'
            const cmd = '你的参数'
            const para1 = '你的参数'
            const para2 = '你的参数'
            const para3 = '你的参数'

            axios.post('/你的url', {
                    sClientId: sClientId,
                    cmd: cmd,
                    para1: para1,
                    para2: para2,
                    para3: para3,
                

            })
                .then(res => {
                ...log你的res.data
                               
            })
                .catch(error => {
                    // 请求失败时的处理
                    console.log(error);
                    if (error.response) {
                        // 请求已发出，但服务器响应的状态码不在 200 范围内
                        console.log(error.response.data);
                        console.log(error.response.status);
                        console.log(error.response.headers);
                    } else {
                        console.log("Error", error.message);
                    }
                    console.log(error.config);
                });

2.1 post传参—字符串

使用npm的qs包解决，下载

			const sClientId = '你的参数'
            const cmd = '你的参数'
            const para1 = '你的参数'
            const para2 = '你的参数'
            const para3 = '你的参数'

            axios.post('/你的url',qs.stringify({
      			   sClientId: sClientId,
      			   cmd: cmd,
      			   para1: para1,
     			   para2: para2,
     			   para3: para3,
     			 }))
                .then(res => {
                ...log你的res.data
                               
            })
                .catch(error => {
                    // 请求失败时的处理
                    console.log(error);
                    if (error.response) {
                        // 请求已发出，但服务器响应的状态码不在 200 范围内
                        console.log(error.response.data);
                        console.log(error.response.status);
                        console.log(error.response.headers);
                    } else {
                        console.log("Error", error.message);
                    }
                    console.log(error.config);
                });