URL传参,用JQ进行编码后传参数给新页面,新页面用JQ进行接收,添加一个自定义函数,获取URL尾部,并用正则表达式进行筛选,最后解码并输出。

本文主要是介绍URL传参,用JQ进行编码后传参数给新页面,新页面用JQ进行接收,添加一个自定义函数,获取URL尾部,并用正则表达式进行筛选,最后解码并输出。,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • A页面代码部分:
    • B页面代码部分:

我用的是通过点击组件进行触发,实际所用触发方式各自发挥想象


此处用 A页面(跳转前) 和 B页面(跳转后) 作为代称

A页面代码部分:

<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$('span').click(function(){var num = encodeURIComponent('465')var content = encodeURIComponent(this.childNodes[0].nodeValue);location.href = "http://www.baidu.com?" + 'content'+ '=' + content + '&num' + num;});})
</script>
<body><span>这是中文内容</span>
</body>

我们都知道Http协议中参数的传输是"key=value"这种简直对形式的,如果要传多个参数就需要用“&”符号对键值对进行分割。如"?name1=value1&name2=value2",这样在服务端在收到这种字符串的时候,会用“&”分割出每一个参数,然后再用“=”来分割出参数值。但如果参数值中包含=或&这种特殊字符的时候就产生了奇异。

如果传递的参数包含中文或者 “&” 字符,比如

location.href = http://www.baidu.com?content=AAAA&BBBB&num=465

根据下面的正则表达式你获取content的时候只剩下 “AAAA” ,因为&已经被当做结尾了。所以后面的BBBB就会被过滤掉。内容是中文的情况下则会乱码

所以传参前最好最好最好最好最好先编码。

在本案例中获取文本时为什么用childNodes[0].nodeValue而不是用innerHTML的原因是因为如果获取内容的时候包含&,&在html是转义字符,如空格 “&nbsp;”。那么获取后的结果是 ”&amp;“ 这明显会出问题。所以通过获取节点内容的方式获取。

URL编码只是简单的在特殊字符的各个字节前加上%,%后面为其特定的数字

编码相关函数

编码:escape( )
escape( ) 方法生成新的由十六进制转义序列替换的字符串。
已废弃: 该特性已经从 Web 标准中删除,虽然一些浏览器目前仍然支持它,但也许会在未来的某个时间停止支持,请尽量不要使用该特性。

解码:unescape( )

编码:encodeURI( )
encodeURI( ) 函数通过将特定字符的每个实例替换为一个、两个、三或四转义序列来对统一资源标识符 (URI) 进行编码 (该字符的 UTF-8 编码仅为四转义序列) 由两个 “代理” 字符组成)。

解码:decodeURI( )

编码:encodeURIComponent( )
encodeURIComponent() 函数通过将一个,两个,三个或四个表示字符的 UTF-8 编码的转义序列替换某些字符的每个实例来编码 URI(对于由两个“代理”字符组成的字符而言,将仅是四个转义序列)。

解码:decodeURIComponent( )

encodeURI( ) 与 encodeURIComponent( ) 最大的区别就是后者会对 =、&等字符 编码,而前者不会。

由于本案例中提到的内容包含&等字符的情况会出现问题,所以用encodeURIComponent( )进行编码

最后通过点击span部分即打开B页面

B页面代码部分:

<script src="js/jquery-1.12.4.js"></script>
<script>$(function(){$('#bbb').html(getUrl('content'));})function getUrl(mane){var guize = new RegExp('(^|&)' + mane + '=([^&]*)(&|$)','i');var wenz = window.location.search.substr(1).match(guize);if(wenz != null){return decodeURIComponent(wenz[2])}return null;}
</script>
<body><span id="bbb">加载中</span>
</body>

因为获取参数可能会分多次获取,所以用函数承载。

正则表达式用来筛选出 “=” 后面的内容。

Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分,可通过 window.location.xxx 格式的相关属性对其进行访问。

Location search 属性
search 属性是一个可读可写的字符串,可设置或返回当前 URL 的查询部分(问号 ? 之后的部分)。

substr( )
substr() 方法可在字符串中抽取从 开始 下标开始的指定数目的字符。
提示: substr() 的参数指定的是子串的开始位置和长度,因此它可以替代 substring() 和 slice() 来使用。

用substr(1)去掉URL后面的问号

match( )
match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。结果输出类型为数组

最后用match( )添加合适的正则表达式,得到的结果根据内容在数组的第几个,选取后进行解码返回值即可


如果完全看不懂正则表达式的话可以去看看b站的视频

10分钟快速掌握正则表达式
最后的总结表

这篇关于URL传参,用JQ进行编码后传参数给新页面,新页面用JQ进行接收,添加一个自定义函数,获取URL尾部,并用正则表达式进行筛选,最后解码并输出。的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_48996531/article/details/125774331
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/235526

相关文章

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

MySQL 中的 CAST 函数详解及常见用法

《MySQL中的CAST函数详解及常见用法》CAST函数是MySQL中用于数据类型转换的重要函数,它允许你将一个值从一种数据类型转换为另一种数据类型,本文给大家介绍MySQL中的CAST... 目录mysql 中的 CAST 函数详解一、基本语法二、支持的数据类型三、常见用法示例1. 字符串转数字2. 数字

Python内置函数之classmethod函数使用详解

《Python内置函数之classmethod函数使用详解》:本文主要介绍Python内置函数之classmethod函数使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录1. 类方法定义与基本语法2. 类方法 vs 实例方法 vs 静态方法3. 核心特性与用法(1编程客

Python函数作用域示例详解

《Python函数作用域示例详解》本文介绍了Python中的LEGB作用域规则,详细解析了变量查找的四个层级,通过具体代码示例,展示了各层级的变量访问规则和特性,对python函数作用域相关知识感兴趣... 目录一、LEGB 规则二、作用域实例2.1 局部作用域(Local)2.2 闭包作用域(Enclos

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

JavaSE正则表达式用法总结大全

《JavaSE正则表达式用法总结大全》正则表达式就是由一些特定的字符组成,代表的是一个规则,:本文主要介绍JavaSE正则表达式用法的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下... 目录常用的正则表达式匹配符正则表China编程达式常用的类Pattern类Matcher类PatternSynta

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

MySQL count()聚合函数详解

《MySQLcount()聚合函数详解》MySQL中的COUNT()函数,它是SQL中最常用的聚合函数之一,用于计算表中符合特定条件的行数,本文给大家介绍MySQLcount()聚合函数,感兴趣的朋... 目录核心功能语法形式重要特性与行为如何选择使用哪种形式?总结深入剖析一下 mysql 中的 COUNT

python常用的正则表达式及作用

《python常用的正则表达式及作用》正则表达式是处理字符串的强大工具,Python通过re模块提供正则表达式支持,本文给大家介绍python常用的正则表达式及作用详解,感兴趣的朋友跟随小编一起看看吧... 目录python常用正则表达式及作用基本匹配模式常用正则表达式示例常用量词边界匹配分组和捕获常用re

MySQL 中 ROW_NUMBER() 函数最佳实践

《MySQL中ROW_NUMBER()函数最佳实践》MySQL中ROW_NUMBER()函数,作为窗口函数为每行分配唯一连续序号,区别于RANK()和DENSE_RANK(),特别适合分页、去重... 目录mysql 中 ROW_NUMBER() 函数详解一、基础语法二、核心特点三、典型应用场景1. 数据分