JS中URLSearchParams的基本用法

  • JS中URLSearchParams的基本用法已关闭评论
  • 30 次浏览
  • A+
所属分类:Web前端
摘要

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

本章将和大家分享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

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