当前位置: 代码迷 >> JavaScript >> js获取现阶段url的中文参数
  详细解决方案

js获取现阶段url的中文参数

热度:283   发布时间:2012-10-29 10:03:53.0
js获取当前url的中文参数

问题源自于大傻同学的需求:A.html的参数传给B.html。必须是在B.html中用js代码来获取该url中的中文参数。。。

网上的类似问题:http://bbs.chinaunix.net/viewthread.php?tid=887933 未解决。

正常情况下,我们在后台获取request传递过来的中文参数都比较好处理。但是这哥们,是直接从html页面跳转到另一个html页面中,然后当另一个html加载完后运行js来获取当前的url中的中文参数。实际上浏览器在把参数传递过来的时候,已不在是中文了,而是%2F%B0%D9%B6%C8%BF%D5%BC%E4格式的字符串了。即使url中显示的是中文,使用window.location.search.substring(1)获取的字段也是类似于%2F%B0%D9%B6%C8%BF%D5%BC%E4的字符串。

显然到这一步为止,我们希望有一个js自带的函数把%2F%B0%D9%B6%C8%BF%D5%BC%E4这样的字符串解析了就行了。

实际上,确实存在这样的一个函数。哈哈哈,这样问题就解决了。先对中文进行编码,然后解码。

通过解决这个问题还学了不少js的东西。

1.js控制页面跳转的方法:

Code:
  1. 第一种:
  2. <scriptlanguage="javascript">
  3. window.navigate("top.jsp");
  4. </script>
  5. 第二种:
  6. <scriptlanguage="JavaScript">
  7. self.location='top.htm';
  8. </script>
  9. 第三种:
  10. <scriptlanguage="javascript"type="text/javascript">
  11. window.location.href="login.jsp?backurl="+window.location.href;
  12. </script>
  13. 第四种:
  14. <scriptlanguage="javascript">
  15. alert("返回上一页面");
  16. window.history.back(-1);
  17. </script>
  18. 第五种:
  19. <scriptlanguage="javascript">
  20. alert("非法访问,请终止!");
  21. top.location='xx.jsp';
  22. </script>

2.中文参数的编码和解码

http://www.w3school.com.cn/js/jsref_escape.asp

3.javascript解析url参数【把参数分离解析出来而已】

Code:
  1. <scripttype="text/javascript">
  2. varLocString=String(window.document.location.href);
  3. functiongetQueryStr(str){
  4. varrs=newRegExp("(^|)"+str+"=([^/&]*)(/&|$)","gi").exec(LocString),tmp;
  5. if(tmp=rs){
  6. returntmp[2];
  7. }
  8. //parametercannotbefound
  9. return"";
  10. }
  11. console.log(getQueryStr("parameter_name"));
  12. </script>

4.常识

 Jsp页面使用URL编码传递中文参数的情况下,在参数的解析过程中会出现乱码。由于java在设计的时候考虑到了国际化的问题,
在java源程序编译成字节码的时候默认使用的是UTF-8编码。而在web运用上,由于不同的浏览器向服务器发送的信息采用的编码
方式不同,在由像tomcat之类的服务器解码的时候会由于编码方式的不同而产生乱码,这是一个会困扰jsp初学者很久的问题。
【http://www.360doc.com/content/10/0317/10/633992_19086741.shtml】

下角同学问题的解决的Demo:
A.html
Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title>test1</title>
  6. <scripttype="text/javascript">
  7. functionc(){
  8. vart=document.form1.t.value;
  9. console.log(t);
  10. console.log(escape(t));
  11. console.log(unescape(t));
  12. self.location='xiajiao2.html?t='+escape(t);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <formid="form1"name="form1"action="xiajiao2.html"method="get">
  18. <inputtype="text"id="t"name="t"/>
  19. <inputtype="button"onclick="returnc()"value="搜索"/>
  20. <br/>
  21. 中国人
  22. </form>
  23. </body>
  24. </html>

B.html

Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <htmlxmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <scriptlanguage="javascript"type="text/javascript"src="static/login_scr/jquery-1.3.2.js"></script>
  6. <title>test2</title>
  7. <scripttype="text/javascript">
  8. varLocString=String(window.document.location.href);
  9. functiongetQueryStr(str){
  10. varrs=newRegExp("(^|)"+str+"=([^/&]*)(/&|$)","gi").exec(LocString);
  11. vartmp;
  12. if(tmp=rs){
  13. returntmp[2];
  14. }
  15. return"";
  16. }
  17. $(document).ready(function(){
  18. console.log(unescape(getQueryStr("t")));
  19. alert(unescape(getQueryStr("t")));
  20. //vart=window.location.search.substring(1);
  21. });
  22. </script>
  23. </head>
  24. <body>
  25. 中国人
  26. <!--<formid="form1"action="xiajiao2.html"method="get">
  27. <inputtype="submit"onclick="returncheck_register()"value="搜索"/>
  28. </form>-->
  29. </body>
  30. </html>
  相关解决方案