js中get请求中将json格式的对象拼接成复杂的url参数

刘东发布于2019-08-26 13:43 / 3809人阅读

const url="/mock/products"
const query={pageIndex: 1, pageSize: 5}

方法一

const serialize = function(obj) {
            var ary = [];
            for (var p in obj)
                if (obj.hasOwnProperty(p) && obj[p]) {
                    ary.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
                }
            return ary.join("&");
        };

方法二

使用了antd,form表单会有undefined的时候，map方法会把undefined也拼接上去。需要处理query。

const queryStr = Object.keys(query)
            .map(key => query[key] && `${encodeURIComponent(key)}=${encodeURIComponent(query[key])}`)
            .join("&");

方法三

const queryStr = Object.keys(query)
            .reduce((ary, key) => {
                if (query[key]) {
                    ary.push(encodeURIComponent(key) + "=" + encodeURIComponent(query[key]));
                }
                return ary;
            }, [])
            .join("&");
url += `?${queryStr}`;

GPU云服务器云服务器 js拼接复杂json数据 php中请求的url js拼接json对象 js get请求json数据

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/109364.html

ajax概述

摘要：换一台电脑就要重新安装。并且还需要适配不同的系统。提交大小几乎没有限制。即协议主要由请求和响应组成。相反则为同步按照程序的顺序，依次往下执行，必须等上一程序执行完成之后才能执行下一程序，阻碍程序的执行。 Ajax 服务器类型按照服务类型：文件服务器，数据库服务器，邮件服务器，Web服务器按照操作系统：Linux服务器，Windows服务器按照应用软件：Apache服务器，Ng...

Achilles 2019-08-23 11:43 评论0 收藏0
Ajax详解

摘要：当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等，请求发送前的回调函数，用来修改请求发送前，此功能可用来设置自定义头信息，在函数中返回将取消这个请求。例如，为请求指定一个回调函数名。即改变回调函数的，默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客...

jokester 2019-08-23 14:15 评论0 收藏0
JavaScript 进阶知识 - Ajax篇

摘要：注意事项以下版本要设置默认编码，，否则程序可能无法正确显示中文。组成部分协议是对请求和响应的报文内容进行了约束和规范。请求报文请求是由客户端发起，其规范格式为请求行请求头请求主体。 showImg(https://segmentfault.com/img/remote/1460000013696283?w=1920&h=1080); Ajax 前言前面我们已经学习了js基础知识和一些...

Dongjie_Liu 2019-08-22 15:20 评论0 收藏0
JavaScript 进阶知识 - Ajax篇

摘要：注意事项以下版本要设置默认编码，，否则程序可能无法正确显示中文。组成部分协议是对请求和响应的报文内容进行了约束和规范。请求报文请求是由客户端发起，其规范格式为请求行请求头请求主体。 showImg(https://segmentfault.com/img/remote/1460000013696283?w=1920&h=1080); Ajax 前言前面我们已经学习了js基础知识和一些...

adie 2019-07-24 10:44 评论0 收藏0
ajax与jsonp一点基础整理

摘要：之所以不能跨域其实是因为受到同源策略的限制，只能让它访问同源下的数据，不能访问不同源下的数据同源策略每个网站只能读取同一来源的数据，这里的同一来源指的是主机名域名协议和端口号的组合。一、Ajax的概念 Ajax是一种技术方案，但并不是一种新技术。它依赖的是现有的CSS/HTML/Javascript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏...

tomlingtm 2019-08-21 16:57 评论0 收藏0