草庐IT

JS中URLSearchParams的基本用法

欢迎来到谢友海的博客 2023-03-28 原文

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

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

有关JS中URLSearchParams的基本用法的更多相关文章

  1. Unity 热更新技术 | (三) Lua语言基本介绍及下载安装 - 2

    ?博客主页:https://xiaoy.blog.csdn.net?本文由呆呆敲代码的小Y原创,首发于CSDN??学习专栏推荐:Unity系统学习专栏?游戏制作专栏推荐:游戏制作?Unity实战100例专栏推荐:Unity实战100例教程?欢迎点赞?收藏⭐留言?如有错误敬请指正!?未来很长,值得我们全力奔赴更美好的生活✨------------------❤️分割线❤️-------------------------

  2. 计算机毕业设计ssm+vue基本微信小程序的小学生兴趣延时班预约小程序 - 2

    项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明:前端使用微信微信小程序开发工具:后端使用ssm:VU

  3. ruby-on-rails - 使用 HTTParty 的非常基本的 Rails 4.1 API 调用 - 2

    Rails相对较新。我正在尝试调用一个API,它应该向我返回一个唯一的URL。我的应用程序中捆绑了HTTParty。我已经创建了一个UniqueNumberController,并且我已经阅读了几个HTTParty指南,直到我想要什么,但也许我只是有点迷路,真的不知道该怎么做。基本上,我需要做的就是调用API,获取它返回的URL,然后将该URL插入到用户的数据库中。谁能给我指出正确的方向或与我分享一些代码? 最佳答案 假设API为JSON格式并返回如下数据:{"url":"http://example.com/unique-url"

  4. ruby-on-rails - Rails 基本 Base64 身份验证 - 2

    我正在尝试复制此GETcurl请求:curl-D--XGET-H"Authorization:BasicdGVzdEB0YXByZXNlYXJjaC5jb206NGMzMTg2Mjg4YWUyM2ZkOTY2MWNiNWRmY2NlMTkzMGU="-H"Content-Type:application/json"http://staging.example.com/api/v1/campaigns在Ruby中,通过电子邮件+apikey生成身份验证:auth="Basic"+Base64::encode64("test@example.com:4c3186288ae23fd9661c

  5. ruby - 有人可以解释一下在 Ruby 中注入(inject)的真实、通俗易懂的用法吗? - 2

    我正在学习Ruby,遇到了inject。我正处于理解它的风口浪尖,但当我是那种需要真实世界的例子来学习一些东西的人时。我遇到的最常见的例子是人们使用inject来添加一个(1..10)范围的总和,我不太关心这个。这是一个任意的例子。在实际程序中我会用它做什么?我正在学习,所以我可以继续使用Rails,但我不必有一个以Web为中心的示例。我只需要一些我可以全神贯注的目标。谢谢大家。 最佳答案 inject有时可以通过它的“其他”名称reduce更好地理解。它是一个对Enumerable进行操作(迭代一次)并返回单个值的函数。它有许多有

  6. ruby-on-rails - Assets 管道损坏 : Not compiling on the fly css and js files - 2

    我开始了一个新的Rails3.2.5项目,Assets管道不再工作了。CSS和Javascript文件不再编译。这是尝试生成Assets时日志的输出:StartedGET"/assets/application.css?body=1"for127.0.0.1at2012-06-1623:59:11-0700Servedasset/application.css-200OK(0ms)[2012-06-1623:59:11]ERRORNoMethodError:undefinedmethod`each'fornil:NilClass/Users/greg/.rbenv/versions/1

  7. ruby-on-rails - Rails - 理解 application.js 和 application.css - 2

    rails新手。只是想了解\assests目录中的这两个文件。例如,application.js文件有如下行://=requirejquery//=requirejquery_ujs//=require_tree.我理解require_tree。只是将所有JS文件添加到当前目录中。根据上下文,我可以看出requirejquery添加了jQuery库。但是它从哪里得到这些jQuery库呢?我没有在我的Assets文件夹中看到任何jquery.js文件——或者直接在我的整个应用程序中没有看到任何jquery.js文件?同样,我正在按照一些说明安装TwitterBootstrap(http:

  8. ruby - 使用法拉第上传文件 - 2

    我在尝试使用Faraday将文件上传到网络服务时遇到问题。我的代码:conn=Faraday.new('http://myapi')do|f|f.request:multipartendpayload={:file=>Faraday::UploadIO.new('...','image/jpeg')}conn.post('/',payload)尝试发布后似乎没有任何反应。当我检查响应时this是我所看到的:#:post,:body=>#,#,@opts={}>,#],@index=0>>,#>],@ios=[#,#,@opts={}>,#],@index=0>,#],@index=0>

  9. ruby - rspec: raise_error 用法来匹配错误信息 - 2

    我使用raise(ConfigurationError.new(msg))引发错误我试着用rspec测试一下:expect{Base.configuration.username}.toraise_error(ConfigurationError,message)但这行不通。我该如何测试呢?目标是匹配message。 最佳答案 您可以使用正则表达式匹配错误消息:it{expect{Foo.bar}.toraise_error(NoMethodError,/private/)}这将检查NoMethodError是否由privateme

  10. node.js - 如何在 Travis CI 上的一个项目中运行 Node.js 和 Ruby 测试 - 2

    我有一个包含多个组件的存储库,其中大部分是用JavaScript(Node.js)编写的,一个是用Ruby(RubyonRails)编写的。我想要一个.travis.yml文件来触发一个运行每个组件的所有测试的构建。根据thisTravisCIGoogleGroupthread,目前还没有官方支持。我的目录结构是这样的:.├──构建服务器├──核心├──扩展├──网络应用├──流浪文件├──package.json├──.travis.yml└──生成文件我希望能够运行特定版本的Ruby(2.2.2)和Node.js(0.12.2)。我已经有了一个make目标,所以maketest在每

随机推荐