url 乱码（3）

以你之姓@ 2022-06-01 13:05 129阅读 0赞

**1.所处环境条件**：

url 地址为：http://127.0.0.1/index.php/home/type/updata.html?id=35

**2.所需函数：**

**\[html\]**  [view plain][]  [copy][view plain]

1.  function getUrlParam(name) \{  
2.              var reg = new RegExp("(^|&)" + name + "=(\[^&\]\*)(&|$)"); //构造一个含有目标参数的正则表达式对象  
3.              var r = window.location.search.substr(1).match(reg);  //匹配目标参数  
4.              if (r != null) return unescape(r\[2\]); return null; //返回参数值  
5.          \}

在通过URL直接传入中文参数时，如果不进行任何编码操作，那么页面将会默认按照当前页面编码方式编码，如果是UTF8那么就会使用UTF8的URL编码。   
例如：

var parm = "message=继续申请";
    window.location.href="http://localhost:8080/demo/test.html?"+parm;

URL上看到的值会是这样的http://localhost:8080/demo/test.html?message=%E7%BB%A7%E7%BB%AD%E7%94%B3%E8%AF%B7。   
test.html接收到的参数值会是如下内容：

//获取url中的参数
    function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if(r != null) return unescape(r[2]); //unescape参数内容。
    return null; //返回参数值
    }   
    
    
    var message = getUrlParam('message');
    //messsage如果没有执行unescape 得到的是%E7%BB%A7%E7%BB%AD%E7%94%B3%E8%AF%B7
    //如果执行了unescape得到的是一串不可识别的乱码。

其实%E7%BB%A7%E7%BB%AD%E7%94%B3%E8%AF%B7就是继续增加的UT-8 URL编码之后的值，通过UTF-8 URL 编码工具可以解码出来。解码代码如下：

当然也可以通过JS 代码解码出来。

//将URL中的UTF-8字符串转成中文字符串  
    function getCharFromUtf8(str) {  
    var cstr = "";  
    var nOffset = 0;  
    if (str == "")  
    return "";  
        str = str.toLowerCase();  
        nOffset = str.indexOf("%e");  
    if (nOffset == -1)  
    return str;  
    while (nOffset != -1) {  
            cstr += str.substr(0, nOffset);  
            str = str.substr(nOffset, str.length - nOffset);  
    if (str == "" || str.length < 9)  
    return cstr;  
            cstr += utf8ToChar(str.substr(0, 9));  
            str = str.substr(9, str.length - 9);  
            nOffset = str.indexOf("%e");  
        }  
    return cstr + str;  
    } 
    
    //将编码转换成字符  
    function utf8ToChar(str) {  
    var iCode, iCode1, iCode2;  
        iCode = parseInt("0x" + str.substr(1, 2));  
        iCode1 = parseInt("0x" + str.substr(4, 2));  
        iCode2 = parseInt("0x" + str.substr(7, 2));  
    return String.fromCharCode(((iCode & 0x0F) << 12) | ((iCode1 & 0x3F) << 6) | (iCode2 & 0x3F));  
    }

调用方式如下:

以上是根据当前页面的编码来处理，不同的页面编码，解码的算法不同。   
当然还有其他方法，就是在传入中文参数的页面，通过JavaScript手动进行编码操作。同样接收方也要使用对应的解码操作

1.  escape 和unescape

var parm = "message="+escape("继续申请"); 
    //此处要注意，escape会将&符号也进行编码，因此需要和接收方统一，是先unescape再截取参数，还是先截取参数再unescape。
    //escape 的结果是：message=%u7EE7%u7EED%u7533%u8BF7
    window.location.href="http://localhost:8080/demo/test.html?"+parm;
    
    //获取url中的参数
    function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if(r != null) return unescape(r[2]); //unescape参数内容。
    return null; //返回参数值
    }

1.  encodeURI 和 decodeURI

var parm = "message="+encodeURI("继续申请"); 
    //encodeURI  的结果是：message=%E7%BB%A7%E7%BB%AD%E7%94%B3%E8%AF%B7
    window.location.href="http://localhost:8080/demo/test.html?"+parm;
    
    //获取url中的参数
    function getUrlParam(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
    var r = window.location.search.substr(1).match(reg); //匹配目标参数
    if(r != null) return decodeURI(r[2]); //decodeURI参数内容。
    return null; //返回参数值
    }

参考：   
[URL编码 utf-8 gb2312的区别][URL_ utf-8 gb2312]  
[阮一峰的网络日志 字符编码笔记：ASCII，Unicode和UTF-8][_ASCII_Unicode_UTF-8]  
[吕瑞麟老师 細談 URL 編碼][_ URL]

1.  // 设置为主页  
2.  function SetHome(obj, vrl) \{  
3.      try \{  
4.          obj.style.behavior = 'url(\#default\#homepage)';  
5.          obj.setHomePage(vrl);  
6.      \} catch (e) \{  
7.          if (window.netscape) \{  
8.              try \{  
9.                  netscape.security.PrivilegeManager  
10.                         .enablePrivilege("UniversalXPConnect");  
11.             \} catch (e) \{  
12.                 alert("此操作被浏览器拒绝！\\n请在浏览器地址栏输入“about:config”并回车\\n然后将 \[signed.applets.codebase\_principal\_support\]的值设置为'true',双击即可。");  
13.             \}  
14.             var prefs = Components.classes\['@mozilla.org/preferences-service;1'\]  
15.                     .getService(Components.interfaces.nsIPrefBranch);  
16.             prefs.setCharPref('browser.startup.homepage', vrl);  
17.         \} else \{  
18.             alert("您的浏览器不支持，请按照下面步骤操作：1.打开浏览器设置。2.点击设置网页。3.输入：" + vrl + "点击确定。");  
19.         \}  
20.     \}  
21. \}

# 3、加入收藏 #

**\[javascript\]**  [view plain][view plain 1]  [copy][view plain 1]

1.  // 加入收藏 兼容360和IE6  
2.  function shoucang(sTitle, sURL) \{  
3.      try \{  
4.          window.external.addFavorite(sURL, sTitle);  
5.      \} catch (e) \{  
6.          try \{  
7.              window.sidebar.addPanel(sTitle, sURL, "");  
8.          \} catch (e) \{  
9.              alert("加入收藏失败，请使用Ctrl+D进行添加");  
10.         \}  
11.     \}  
12. \}

# 4、获取URL参数 #

**\[javascript\]**  [view plain][view plain 1]  [copy][view plain 1]

1.  function getUrlParam(name) \{  
2.      var reg = new RegExp("(^|&)" + name + "=(\[^&\]\*)(&|$)"); // 构造一个含有目标参数的正则表达式对象  
3.      var r = window.location.search.substr(1).match(reg); // 匹配目标参数  
4.      if (r != null)  
5.          return unescape(r\[2\]);  
6.      return null; //返回参数值  
7.  \}

# 5、解决中文乱码 #

**\[javascript\]**  [view plain][view plain 1]  [copy][view plain 1]

1.  //发送post页面  
2.    
3.  $('\#simpleSearchButton').click(function()\{  
4.      var \_k = $('\#textfield').val();  
5.      var url = '';  
6.      if(\_k==null || \_k=="")\{  
7.          //url = encodeURI('<%=path%>/');  
8.          return;  
9.      \}else\{  
10.         url = encodeURI('<%=path%>/search.jsp?keyword=' + \_k);  
11.     \}  
12.       
13.     url = encodeURI(url);//<span style="font-family: Arial;">两次加密（一次encode可能不成功时，使用两次encode）</span>  
14.     window.open(url,'\_self');  
15. \});

**\[javascript\]**  [view plain][view plain 1]  [copy][view plain 1]

1.  //接受参数页面  
2.  //使用第四节中提供的方法  
3.    
4.  window.onload = function()\{  
5.      var keyword = getUrlParam('keyword');//获取key  
6.      if(keyword == null) keyword ='';  
7.      keyword = decodeURI(decodeURI(keyword));//两次解密（一次encode不成功时，使用两次encode，因此此处就要两次decode）  
8.      $("\#textfield").val(keyword);  
9.      simpleQuery();  
10.     $("\#search\_paging").show();  
11. \}

1.  <script type="text/javascript">  
2.  $('\#addtype').click(function()\{  
3.          var id =getUrlParam('id');  
4.          var code=$('\#typecode').val();  
5.          var name=$('\#typename').val();  
6.          var fatherid=$('\#fatherid').val();  
7.          var fullname=$('\#fullname').val();  
8.          var levels=$('\#leves').val();  
9.          var isuse=$('\#isuse').val();  
10.         if(isuse=='是')\{  
11.             isuse=1;  
12.         \}else\{  
13.             isuse=0;  
14.         \}  
15.         if(!/^\[0-9a-zA-Z\]\{5,5\}$/.test(code))\{  
16.             layer.tips('请输入5位数字或字母编号','\#typecode',\{tips:3\});  
17.             return false;  
18.         \}  
19.         if(!/^\[\\u4e00-\\u9fa5\]\{2,4\}$/.test(name))\{  
20.   
21.             layer.tips('请输入2-4位汉字','\#typename',\{tips:3\});  
22.             return false;  
23.         \}  
24.   
25.         if(!/^\[0-9a-zA-Z\]\{5,5\}$/.test(fatherid))\{  
26.             layer.tips('请输入5为父级ID','\#fatherid',\{tips:3\});  
27.             return false;  
28.         \}  
29.   
30.         if(!/^\[\\u4e00-\\u9fa5\]\{2,10\}$/.test(fullname))\{  
31.             layer.tips('请输入大于2位少于10位全称','\#fullname',\{tips:3\});  
32.             return false;  
33.         \}  
34.   
35.           
36.         $.post("\{:U('/home/type/updatatype')\}",\{id:id,code:code,name:name,fatherid:fatherid,levels:levels,isuse:isuse\},function(data)\{  
37.             if(data.status==1)\{  
38.                 layer.msg(data.info,\{icon:1\});  
39.                 window.location.href="\{:U('/home/type/index')\}";  
40.             \}  
41.             else\{  
42.                 layer.msg(data.info,\{icon:2\});  
43.                 window.location.href="\{:U('/home/type/index')\}";  
44.             \}  
45.             ;  
46.         \},'json');  
47.           
48.     \});  
49.          function getUrlParam(name) \{  
50.             var reg = new RegExp("(^|&)" + name + "=(\[^&\]\*)(&|$)"); //构造一个含有目标参数的正则表达式对象  
51.             var r = window.location.search.substr(1).match(reg);  //匹配目标参数  
52.             if (r != null) return unescape(r\[2\]); return null; //返回参数值  
53.         \}  
54.       
55. </script>  
56. </html>

[view plain]: http://blog.csdn.net/u010918847/article/details/52994559#
[URL_ utf-8 gb2312]: http://link.zhihu.com/?target=http%3A//www.cnblogs.com/lijea/p/4192030.html
[_ASCII_Unicode_UTF-8]: http://link.zhihu.com/?target=http%3A//www.ruanyifeng.com/blog/2007/10/ascii_unicode_and_utf-8.html
[_ URL]: http://link.zhihu.com/?target=http%3A//xml-nchu.blogspot.hk/p/url.html
[view plain 1]: http://blog.csdn.net/lina791211/article/details/36040169#