url转码

短命女 2022-06-01 12:49 220阅读 0赞

> 简单描述就是需要从URL中获取所传递的参数。如果使用后台语言我们都会有很多中方法来获取，但是网站的中的所有数据都是通过AJAX进行传递的，所以需要使用JS进行获取参数，然后传递给后台。在网上查到了多种方式，在这里进行一下总结记录，方便以后学习使用。

**1、获取整个URL字符串**

>        要想获取URL中的参数，首先我们就要获取到整个URL字符串。我们使用：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua\_wei这个URL为例。
> 
> ① 获取(或设置) URL 的协议部分：window.location.protocol
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.protocol设置或获取 URL 的协议部分  
> 2.  var test = window.location.protocol;  
> 3.  alert(test);  
> 4.  //返回弹出：http:  
> 
> ② 获取(或设置) URL 的主机部分：window.location.host
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.host设置或获取 URL 的主机部分  
> 2.  var test = window.location.host;  
> 3.  alert(test);  
> 4.  //返回弹出：www.zhihuaw.com  
> 
> ③ 获取(或设置)  URL 关联的端口号码：window.location.port
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.port设置或获取与 URL 关联的端口号码  
> 2.  var test = window.location.port;  
> 3.  alert(test);  
> 4.  //返回弹出：空字符(如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符)  
> 
> ④ 获取(或设置)  URL 的路径部分也就是文件地址：window.location.pathname
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.pathname设置或获取 URL 的路径部分（就是文件地址）  
> 2.  var test = window.location.pathname;  
> 3.  alert(test);  
> 4.  //返回弹出：/wap/tmpl/member/member.html  
> 
> ⑤ 获取(或设置) URL属性中跟在问号后面的部分：window.location.search
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.search设置或获取 href 属性中跟在问号后面的部分  
> 2.  var test = window.location.search;  
> 3.  alert(test);  
> 4.  //返回弹出：?token=zhihua\_wei  
> 
> ⑥ 获取(或设置)  URL属性中在井号“\#”后面的分段：window.location.hash
> 
> **\[html\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.hash设置或获取 href 属性中在井号“\#”后面的分段  
> 2.  var test = window.location.hash;  
> 3.  alert(test);  
> 4.  //返回弹出：空字符(因为url中没有)  
> 
> ⑦ 获取(或设置) 整个 URL字符串：window.location.href
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  //window.location.href设置或获取整个 URL字符串  
> 2.  var test = window.location.href;  
> 3.  alert(test);  
> 4.  //返回弹出：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua\_wei

**2、获取URL中的参数值**

>         获取了URL字符串之后就是获取URL字符串中的参数数据信息。下面是几种获取参数的方法：
> 
> ① 同正则表达式对比获取参数值
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  function getQueryString(name)\{  
> 2.      var reg = new RegExp("(^|&)"\+ name +"=(\[^&\]\*)(&|$)");  
> 3.      var r = window.location.search.substr(1).match(reg);  
> 4.      if (r!=null) return r\[2\]; return '';  
> 5.  \}  
> 
> ② split拆分法
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  function GetRequest() \{  
> 2.      var url = location.search; //获取url中"?"符后的字串  
> 3.      var theRequest = new Object();  
> 4.      if (url.indexOf("?") != -1) \{  
> 5.          var str = url.substr(1);  
> 6.          strs = str.split("&");  
> 7.          for (var i = 0; i < strs.length; i++) \{  
> 8.              theRequest\[strs\[i\].split("=")\[0\]\] = unescape(strs\[i\].split("=")\[1\]);  
> 9.          \}  
> 10.     \}  
> 11.     return theRequest;  
> 12. \}  
> 13. var Request = new Object();  
> 14. Request = GetRequest();  
> 15. // var id=Request\["id"\];   
> 16. // var 参数1,参数2,参数3,参数N;  
> 17. // 参数1 = Request\['参数1'\];  
> 18. // 参数2 = Request\['参数2'\];  
> 19. // 参数3 = Request\['参数3'\];  
> 20. // 参数N = Request\['参数N'\];  
> 
> ③ 单个参数的获取方法
> 
> **\[javascript\]**  [view plain][]  [copy][view plain]
> 
> 1.  function GetRequest() \{  
> 2.      var url = location.search; //获取url中"?"符后的字串  
> 3.      if (url.indexOf("?") != -1) \{  //判断是否有参数  
> 4.          var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串  
> 5.          strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）  
> 6.          alert(strs\[1\]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）  
> 7.      \}  
> 8.  \}

怎么解决HTML界面间传递中文参数的乱码问题呢？

1.可以使用encodeURI编码，decodeURI解码

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

1.  //点击搜索  
2.  $("\#searchBtn").click(function()\{  
3.      var searchText= jQuery.trim($(".keyword").val());  
4.     var searchUrl =encodeURI("search.html?searchText="\+searchText);   //使用encodeURI编码  
5.     window.location.href =searchUrl;  
6.  \})

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

1.  //获取 上一个搜索页面传来的参数  
2.       var searchUrl =window.location.href;  
3.       var searchData =searchUrl.split("=");        //截取 url中的“=”,获得“=”后面的参数  
4.       var  searchText =decodeURI(searchData\[1\]);   //decodeURI解码  
5.         $(".keyword1").val(searchText);            //将搜索的数据显示在搜索页面的搜索框中

2.还可以采用  encodeURIComponent编码、decodeURIComponent解码等方式编码解码

encodeURIComponent   和encodeURI的区别是啥呢？  直接看图就很明了

![20170528200630994][]

一：get请求url中带有中文参数，有三种方式进行处理防止中文乱码

1、如果使用tomcat作为服务器，那么修改tomcat配置文件conf/server.xml中，在  <Connector port="8082" protocol="HTTP/1.1"  中加入  URIEncoding="utf-8"的编码集

2、前台需要对中文参数进行编码，调用js方法encodeURI（url），将url编码，然后请求。

后台接受时，需处理String str = new String(request.getParameter("param").getBytes("iso8859-1"),"UTF-8");

原因：tomcat不设置编码时，默认是iso8859-1，即tomcat默认会以iso8859-1编码接收get参数。 以上操作是将参数以iso8859-1编码转化为字节数组，然后再以UTF-8将字节数组转化为字符串。

另外需注意在框架的使用中：request.setCharacterEncoding(encoding);只对post请求有效。而且，spring的CharacterEncodingFilter也只是做了request(和response）.setCharacterEncoding(encoding);的操作。所以spring的filter配置不作用于get参数接收。

3、解决get请求，后台接受中文参数乱码处理的方法（搜索功能带参数）

（1）前台获取数据，在js中进行编码处理

![Center][]

encodeURI函数采用utf-8进行编码，而在服务器的进行解码时候，默认都不是以uft-8进行解码，所以就会出现乱码。

两次encodeURI,第一次编码得到的是UTF-8形式的URL，第二次编码得到的依然是UTF-8形式的URL，但是在效果上相当于首先进行了一 次UTF-8编码(此时已经全部转换为ASCII字符)，再进行了一次iso-8859-1编码，因为对英文字符来说UTF-8编码和ISO- 8859-1编码的效果相同。

（2）后台解码处理

在后台接收参数时候，首先通过request.getParameter()自动进行第一次解码(可能是 gb2312,gbk,utf-8,iso-8859-1等字符集,对结果无影响)得到ascii字符，然后再使用UTF-8进行第二次解码，通常使用 java.net.URLDecoder("","UTF-8")方法。

![Center 1][]

两次编码两次解码的过程为：

UTF-8编码->UTF-8(iso-8859-1)编码->iso-8859-1解码->UTF-8解码，编码和解码的过程是对称的，所以不会出现乱码。

注：

1：这种两次encodeURI方式不用去知道服务器的解码方式，也可以得到正确的数据。

2:get请求建议尽量不带中文参数，如果使用建议使用两次encodeURI进行编码

3.参考资料     URL编码与两次encodeURI：http://blog.sina.com.cn/s/blog\_8af112fd0102vxb7.html

GBK与UTF-8的转码：
    　　iconv("gbk","utf-8","php中文转码");//把中文gbk编码转为utf8
    　　iconv("utf-8","gbk","php中文转码");//把中文utf8编码转为gbk
    一：Js的Url中传递中文参数乱码问题，重点：encodeURI编码，decodeURI解码：
    1.传参页面
    Javascript代码：<script type=”text/javascript”>// <![CDATA[
    function send(){
      
    var url = "test01.html";
    var userName = $("#userName").html();
    window.open(encodeURI(url + "?userName=" + userName)); }
    // ]]>
    </script>
    2. 接收参数页面：test02.html
    <script>
    var urlinfo = window.location.href;//获取url
    var userName = urlinfo.split(“?”)[1].split(“=”)[1];//拆分url得到”=”後面的参数
    $(“#userName”).html(decodeURI(userName));
    </script>
    二：如何获取Url“？”后，“=”的参数值：
    A.首先用window.location.href获取到全部url值。
    B.用split截取“?”后的全部
    C.split(“?”)后面的[1]内数字，默认从0开始计算

# [js获取url(request)中的参数][js_url_request] #

index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&......

静态html文件js读取url参数，根据获取html的参数值控制html页面输出。

一、字符串分割分析法。

这里是一个获取URL带REQUESTRING参数的JAVASCRIPT客户端解决方案。

相当于asp的request.querystring，PHP的$\_GET，jsp的request.getParameter

//var USERCODE="<%=request.getParameter("USERCODE")%>";

//以上是用request.getParameter在浏览器端获取参数值, 也可以是用该方法在服务器端获取参数方法

函数:

function GetRequest() \{

var url = location.search; //获取url中含"?"符后的字串

var theRequest = new Object();

if (url.indexOf("?") != -1) \{

var str = url.substr(1);

strs = str.split("&");

for(var i = 0; i < strs.length; i ++) \{

theRequest\[strs\[i\].split("=")\[0\]\]=unescape(strs\[i\].split("=")\[1\]);

return theRequest;

</Script>

然后我们通过调用此函数获取对应参数值：

var Request = new Object();

Request = GetRequest();

var 参数1,参数2,参数3,参数N;

参数1 = Request\['参数1'\];

参数2 = Request\['参数2'\];

参数3 = Request\['参数3'\];

参数N = Request\['参数N'\];

</Script>

以此获取url串中所带的同名参数

二、正则分析法。

function GetQueryString(name) \{

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

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

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

alert(GetQueryString("参数名1"));

alert(GetQueryString("参数名2"));

alert(GetQueryString("参数名3"));

三、java举例如下：

1、<%@ page language="java" import="java.util.\*,com.servlet.bean" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <body>    <script type="text/javascript">                 <%        ArrayList list = (ArrayList)request.getAttribute("list");        for(int i=0;i<list.size();i++)\{            bean Bean = (bean)list.get(i);     %>          var name = '<%=Bean.getName()%>' //这里是从request获取参数，赋值给name这个变量     <%              \}     %>    </script>  </body></html>2、在servlet服务端的代码如下：package com.servlet;import java.io.IOException;import java.io.PrintWriter;import java.util.ArrayList;import javax.servlet.ServletException;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;public class servlet extends HttpServlet \{    public servlet() \{        super();    \}    /\*\*     \* Destruction of the servlet. <br>     \*/    public void destroy() \{        super.destroy(); // Just puts "destroy" string in log        // Put your code here    \}    public void doGet(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException \{        bean Bean = new bean();        Bean.setName("liubin");        Bean.setPwd("123");                 bean Bean2 = new bean();        Bean2.setName("aaa");        Bean2.setPwd("456");                 bean Bean3 = new bean();        Bean3.setName("bbb");        Bean3.setPwd("789");                 ArrayList list = new ArrayList();        list.add(Bean);        list.add(Bean2);        list.add(Bean3);                 request.setAttribute("list", list);                 request.getRequestDispatcher("../index.jsp").forward(request, response);    \}    public void doPost(HttpServletRequest request, HttpServletResponse response)            throws ServletException, IOException \{        doGet(request ,response);    \}    public void init() throws ServletException \{        // Put your code here    \}\}

四、

javascript可以通过window.navigator来进行判断。不同的浏览器navigator对象里的名称是不同的：window.navigator.userAgent  记录浏览器信息以及操作系统信息。

1.取变量值    var a = '<%=request.getAttribute("aaa");%>' ;2.也可以将这个值放在页面上.再取出来.    <input type="hidden" value="<%=request.getAttribute("aaa");%>" id="aaa"/>    var a = document.getElementById('aaa').value ;(注):对于对象,我推荐使用第二种方法.这样可以在页面中不IMPORT JAVA类..更符合现在编程    eg:    <input type="hidden" value="$\{student.name\}" id="stuName"/>    var stuName = $('stuName').value ; // [prototype.js][]新功能,简写.

[view plain]: http://blog.csdn.net/zhihua_w/article/details/54845945#
[view plain 1]: http://blog.csdn.net/qq_30979185/article/details/72794359#
[20170528200630994]: /images/20220601/62613c8b1df941fd93b9ceb1f0c04096.png
[Center]: /images/20220601/315aee731110418a9cbe597cb02b1c19.png
[Center 1]: /images/20220601/831e58eaa5d14b28889bcef763fbb4ab.png
[js_url_request]: http://www.cnblogs.com/appcx/p/6962130.html
[prototype.js]: http://zhidao.baidu.com/search?word=prototype.js&fr=qb_search_exp&ie=utf8