首页 > 其他分享 >JS中URLSearchParams的基本用法

JS中URLSearchParams的基本用法

时间:2022-12-12 21:23:51浏览次数:51  
标签:searchParams console log URLSearchParams 用法 var JS name

本章将和大家分享JS中URLSearchParams的基本用法。话不多说,下面我们直接来看代码。

一、JS中URLSearchParams的基本用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS中URLSearchParams的基本用法</title>
    <script src="/lib/vue.js"></script>
    <script src="/lib/axios.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="测试" @click="testURLSearchParams">
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                msg: 'Hello Vue!'
            },
            methods: {
                //测试URLSearchParams
                //参考博文:https://www.cnblogs.com/zshno1/p/15993017.html
                testURLSearchParams: function () {
                    var _this = this; //方法中通过this关键字获取data中的数据
                    var url = new URL(`https://www.baidu.com?a=1&b=2`);
                    var searchParams = new URLSearchParams(url.search);

                    //1、toString() 返回适用在URL中的查询字符串
                    console.log(searchParams.toString()); //输出:a=1&b=2
                    console.log(Object.fromEntries(searchParams.entries())); //输出:{a: '1', b: '2'}

                    //2、append(name,value) 插入一个指定的键/值对作为新的搜索参数
                    searchParams.append('c', 3);
                    console.log(searchParams.toString()); //输出:a=1&b=2&c=3
                    console.log(Object.fromEntries(searchParams.entries())); //输出:{a: '1', b: '2', c: '3'}

                    //3、delete(name) 删除指定名称的所有搜索参数
                    searchParams.delete('c');

                    //4、get(name) 获取指定搜索参数的第一个值
                    console.log(searchParams.get('a')); //输出:1

                    //5、getAll(name) 获取指定搜索参数的所有值,返回是一个数组
                    console.log(searchParams.getAll('a')); //输出:['1']

                    //6、has(name) 判断是否存在此搜索参数
                    console.log(searchParams.has('a')); //输出:true

                    //7、set(name, value) 设置相关联的值,已存在则覆盖
                    searchParams.set('a', 11);
                    searchParams.set('d', 4);
                    console.log(Object.fromEntries(searchParams.entries())); //输出:{a: '11', b: '2', d: '4'}

                    //8、entries() 返回一个iterator可以遍历所有键/值对的对象
                    var paramArr = searchParams.entries();
                    for (var item of paramArr) {
                        console.log(item); //依次输出:['a', '11'],['b', '2'],['d', '4']
                    }

                    //9、此外还有 keys()/values()/sort(name, value) 等方法,此处就不再一一列举了。 
                },
                //URLSearchParams实践
                getData: function () {
                    var _this = this;
                    var params = new URLSearchParams();
                    params.append("action", "getData");
                    params.append("pageIndex", 1);
                    params.append("pageSize", 15);
                    axios.post('/Ashx/Epc/ThirdInterfaceDataHandler.ashx', params)
                        .then(function (result) {
                            console.log(result);
                        })
                        .catch(function (error) {
                            console.log(error);
                        });
                }
            }
        });

        //C#中计算分页数
        //totalCount:总记录数;pageSize:页大小;totalPage:总页数
        //var totalPage = (totalCount + pageSize - 1) / pageSize; //计算分页数
    </script>
</body>

</html>

二、C#中计算分页数

//totalCount:总记录数;pageSize:页大小;totalPage:总页数
var totalPage = (totalCount + pageSize - 1) / pageSize; //计算分页数

三、JS中判断数组中是否包含某元素的方法

var fruits = ["Banana", "Orange", "Apple", "Mango"];
if (fruits.indexOf("Apple") > -1) { //存在
    console.log(fruits.indexOf("Apple")); //输出:2
}

 

Demo源码:

链接:https://pan.baidu.com/s/1NLLD73m048F-59WMOtOTCw 
提取码:t0k8

此文由博主精心撰写转载请保留此原文链接:https://www.cnblogs.com/xyh9039/p/16977068.html

版权声明:如有雷同纯属巧合,如有侵权请及时联系本人修改,谢谢!!!

标签:searchParams,console,log,URLSearchParams,用法,var,JS,name
From: https://www.cnblogs.com/xyh9039/p/16977068.html

相关文章

  • 记录两个Bug 1.FastJson 2.反射
    1.使用FastJson将一个对象转成JSONObject时BigDecimal(整数,后面没有带0)变成了Integer"10"--->10"10.1"-->"10.1"解决方案:在BigDecimal的字段上加上@JSONField(s......
  • 7天入门小程序开发 | 03-小程序JS前后端交互
            第三节课又来啦,今天我们将会让小程序页面动起来,通过JS实现前后端的互动,包括:JS传静态数据JS传递列表数据并循环输出点击按钮刷新时间无需点击按钮自动刷新时......
  • HarmonyOS实战一【JS基础组件】switch、chart等的使用
    写在前面嗯,有这样一个活动,所以搞了一个小Demo,顺便学习一个js的鸿蒙的开发方式,感兴趣的小伙伴积极参与,活动地址:HarmonyOS线上Codelabs系列挑战赛博文主要是一些前端组件使......
  • Vue.js 学习笔记
    我想要的,时间自然会给我。年龄也不会是我的阻碍,反而会是我的骄傲。:我不用在某个年龄段必须做某事,不要让任何人打乱自己的节奏。---------------------摘加油生活:我要努力呀......
  • Spring Boot + Gzip 压缩超大 JSON 对象,传输大小减少一半
    SpringBoot+Gzip压缩超大JSON对象,传输大小减少一半源码在:\day01-sentinel\cloud-demo\user-service\src\main\java\cn\itcast\user\filter......
  • JS逆向之浏览器补环境详解
    JS逆向之浏览器补环境详解“补浏览器环境”是JS逆向者升职加薪的必备技能,也是工作中不可避免的操作。为了让大家彻底搞懂“补浏览器环境”的缘由及原理,本文将从以下四个......
  • rxjs究竟是观察者模式还是发布订阅模式
    rxjs源代码Subscriber.ts,里面对Subscriber的定义:exportclassSubscriberextendsSubscriptionimplementsObserverrxjs里面观察者模式还是发布订阅模式?观察者模式和发......
  • golang的chan用法与fatal error: all goroutines are asleep - deadlock!
    例子1:funcmain(){ch:=make(chanint)ch<-1fmt.Println("发送成功")}上面这段代码能够通过编译,但是执行的时候会出现以下错误:为什么会出现deadlock错误呢?......
  • 前端_js设计模式
    什么是设计模式1.什么是设计模式设计模式是前人总结出的,解决开发中某类问题的方法;我们在过去的代码编写中已经接触过很多的设计模式了,只不过当时咱们不知道这就......
  • webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——
    使用three.js(webgl)搭建智慧楼宇、3D定位、三维室内定位、设备检测、数字孪生、物联网3D、物业3D监控、物业基础设施可视化运维、3d建筑,3d消防,消防演......