美文网首页
axios:使用cdn调用qs进行post传参

axios:使用cdn调用qs进行post传参

作者: 网恋被骗二块二 | 来源:发表于2021-12-13 16:20 被阅读0次

在之前了解axios时,在进行传参时无论如何只能使用地址栏附带参数,但实际上我使用的并非GET,而是POST等方式。

        btn.onclick = () => {
            console.log(111)
            axios.post('./1.php', {
                name: 'axios',
                age: 18
            })
        };

我先后百度了不少资料,大多数解决办法是使用qs库,npm里面自带的,但是给出的一般都是使用node安装(当时没想到去找qs的cdn,又或者说是没找到?上周的事情,忘了。)
至于为什么我要用那个qs库,这是因为用上面展示那个代码传参,它的参数会存在浏览器的Request Payload里面。在PHP(目前学习的是php)里用get或者post都获取不到这个参数。而当写成如下形式——

        btn.onclick = () => {
            console.log(111)
            axios({
                method: 'post',
                url: './1.php',
                data: {
                    firstName: 'clear'
                }
            })
        };
  // 官方文档
  // `data` 是作为请求主体被发送的数据
  // 只适用于这些请求方法 'PUT', 'POST', 和 'PATCH'
  // 在没有设置 `transformRequest` 时,必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属:FormData, File, Blob
  // - Node 专属: Stream
  data: {
    firstName: 'Fred'
  },

当时我有一个疑惑,明明官方文档也是这么说的要用data来标明,为什么传递不了呢?我这也明明是一个普通对象(plain object),用字符串的话,那就和get地址栏拼接没什么区别。
首先是:https://segmentfault.com/a/1190000018774494
A_大白的博客,解决了我对于formData和Request Payload的区别的疑惑。
其次是今天意外点开的一个博客:https://blog.csdn.net/example440982/article/details/89927349?utm_medium=distribute.pc_relevant.none-task-blog-2defaultbaidujs_baidulandingword~default-0.no_search_link&spm=1001.2101.3001.4242.1
按照今天的课程,本来是学习node.js,那么我用npm install qs 安装qs模块也成功了,那肯定也能用了,结果没想到还是失败了,阴差阳错就点到了这个博客,使用在线cdn引入qs,于是

        let qs = Qs
        btn.onclick = () => {
            console.log(111)
            axios.post('./1.php', qs.stringify({
                name: 'zs',
                age: 19
            }))
        };

诶,成功挂到Form Data下了!再换个姿势:

        btn.onclick = () => {
            console.log(111)
            axios({
                method: 'post',
                url: './1.php',
                data: qs.stringify({
                    name: 'zs',
                    age: 18
                })
            })
        };

都成了!
按照大佬的话来说,这叫做**普通html页面使用[axios] post数据需要处理提交的数据,一般用到qs库
**

相关文章

网友评论

      本文标题:axios:使用cdn调用qs进行post传参

      本文链接:https://www.haomeiwen.com/subject/nrvjfrtx.html