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

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 对象

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()	用新的文档替换当前文档