url转码

简单描述就是需要从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

1. //window.location.protocol设置或获取 URL 的协议部分  
2. var test = window.location.protocol;  
3. alert(test);  
4. //返回弹出：http:  

② 获取(或设置) URL 的主机部分：window.location.host

[javascript]  view plain  copy

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

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

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

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

1. //window.location.hash设置或获取 href 属性中在井号“#”后面的分段  
2. var test = window.location.hash;  
3. alert(test);  
4. //返回弹出：空字符(因为url中没有)  

⑦ 获取(或设置) 整个 URL字符串：window.location.href

[javascript]  view plain  copy

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

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

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

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. }  

版权声明：转载时请标注http://blog.csdn.net/zhihua_w

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

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

[javascript]  view plain  copy

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  copy

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的区别是啥呢？  直接看图就很明了

 一：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中进行编码处理

 

             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")方法。

 

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

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)中的参数

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在浏览器端获取参数值, 也可以是用该方法在服务器端获取参数方法

函数:

<Script language="javascript">

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>

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

<Script language="javascript">

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新功能,简写.