JavaScript URL传值过程中遇到的问题及知识点总结

Web系统开发过程中经常用到URL进行传值，刚刚接触时不太会解析，会出现中文乱码问题等。

1、父子页面之间的传值（在一个页面中以加载iframe框架的形式调出另一个页面）。

var URL=“XXXX..?code=aaa&name=liming&age=123”；

在子页面中进行解析时：

var href=window.location.href; //获取到当前的地址

然后以截取字符串的形式获取相应的参数值（截取字符串的方式适用于参数较少的情况，如果参数较多则不适合）；

var code=href.substring(href.indexOf('=')+1,href.indexOf('&'));

.........一次类推获取所有参数。

2、由于URL编码规范中中文属于不合法字符，所以需要编码成合法的URL。

JavaScript中提供的全局函数：

顶层函数（全局函数）

函数	描述
decodeURI()	解码某个编码的 URI。
decodeURIComponent()	解码一个编码的 URI 组件。
encodeURI()	把字符串编码为 URI。
encodeURIComponent()	把字符串编码为 URI 组件。
escape()	对字符串进行编码。
eval()	计算 JavaScript 字符串，并把它作为脚本代码来执行。
getClass()	返回一个 JavaObject 的 JavaClass。
isFinite()	检查某个值是否为有穷大的数。
isNaN()	检查某个值是否是数字。
Number()	把对象的值转换为数字。
parseFloat()	解析一个字符串并返回一个浮点数。
parseInt()	解析一个字符串并返回一个整数。
String()	把对象的值转换为字符串。
unescape()	对由 escape() 编码的字符串进行解码。

例如：

var url="XXXXX..?code=111&name=晓明&age=123";

window.location.assign(encodeURL(url));

在另一个页面解析的时候为：

var href=decodeURL(location.href);

定义一个函数方便获取url中的参数

函数1：(当参数中没用中文的时候使用)

function getURLParameter(){

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var href = decodeURI(location.href);

var r = window.location.search.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

}

函数2：(当参数中用中文的时候使用)

function getURLParameter(name) {

var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");

var l = decodeURI(window.location.search);

var r = l.substr(1).match(reg);

if (r != null) return unescape(r[2]);

return null;

}

对应的知识点：

RegExp 对象

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

语法：new RegExp(pattern, attributes);

参数

参数 pattern 是一个字符串，指定了正则表达式的模式或其他正则表达式。

参数 attributes 是一个可选的字符串，包含属性 "g"、"i" 和 "m"，分别用于指定全局匹配、区分大小写的匹配和多行匹配。ECMAScript 标准化之前，不支持 m 属性。如果 pattern 是正则表达式，而不是字符串，则必须省略该参数。

返回值

一个新的 RegExp 对象，具有指定的模式和标志。如果参数 pattern 是正则表达式而不是字符串，那么 RegExp() 构造函数将用与指定的 RegExp 相同的模式和标志创建一个新的 RegExp 对象。

如果不用 new 运算符，而将 RegExp() 作为函数调用，那么它的行为与用 new 运算符调用时一样，只是当 pattern 是正则表达式时，它只返回 pattern，而不再创建一个新的 RegExp 对象。

抛出

SyntaxError - 如果 pattern 不是合法的正则表达式，或 attributes 含有 "g"、"i" 和 "m" 之外的字符，抛出该异常。

TypeError - 如果 pattern 是 RegExp 对象，但没有省略 attributes 参数，抛出该异常。

Location 对象

Location 对象包含有关当前 URL 的信息。

Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。

注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。

Location 对象属性

属性	描述
hash	返回一个URL的锚部分
host	返回一个URL的主机名和端口
hostname	返回URL的主机名
href	返回完整的URL
pathname	返回的URL路径名。
port	返回一个URL服务器使用的端口号
protocol	返回一个URL协议
search	返回一个URL的查询部分

Location 对象方法

方法	说明
assign()	载入一个新的文档
reload()	重新载入当前文档
replace()	用新的文档替换当前文档

巴特西

JavaScript URL传值过程中遇到的问题及知识点总结

Web系统开发过程中经常用到URL进行传值，刚刚接触时不太会解析，会出现中文乱码问题等。

顶层函数（全局函数）

RegExp 对象

参数

返回值

抛出

Location 对象

Location 对象

Location 对象属性

Location 对象方法

最新文章

热门文章