您的位置: 首页  >  文章  >  url转码

url转码

分类: 文章 • 2024-12-03 16:39:34 







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

  2. 
var test = window.location.protocol;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：http:  

    5. 










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











[javascript] view
plain copy








    

  1. 
//window.location.host设置或获取 URL 的主机部分  

    2. 

  2. 
var test = window.location.host;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：www.zhihuaw.com  

    5. 










③ 获取(或设置)  URL 关联的端口号码：window.location.port











[javascript] view
plain copy








    

  1. 
//window.location.port设置或获取与 URL 关联的端口号码  

    2. 

  2. 
var test = window.location.port;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：空字符(如果采用默认的80端口(即使添加了:80)，那么返回值并不是默认的80而是空字符)  

    5. 






④ 获取(或设置)  URL 的路径部分也就是文件地址：window.location.pathname











[javascript] view
plain copy








    

  1. 
//window.location.pathname设置或获取 URL 的路径部分（就是文件地址）  

    2. 

  2. 
var test = window.location.pathname;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：/wap/tmpl/member/member.html  

    5. 






⑤ 获取(或设置) URL属性中跟在问号后面的部分：window.location.search











[javascript] view
plain copy








    

  1. 
//window.location.search设置或获取 href 属性中跟在问号后面的部分  

    2. 

  2. 
var test = window.location.search;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：?token=zhihua_wei  

    5. 






⑥ 获取(或设置)  URL属性中在井号“#”后面的分段：window.location.hash











[html] view
plain copy








    

  1. 
//window.location.hash设置或获取 href 属性中在井号“#”后面的分段  

    2. 

  2. 
var test = window.location.hash;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：空字符(因为url中没有)  

    5. 






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











[javascript] view
plain copy








    

  1. 
//window.location.href设置或获取整个 URL字符串  

    2. 

  2. 
var test = window.location.href;  

    3. 

  3. 
alert(test);  

    4. 

  4. 
//返回弹出：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua_wei  

    5. 






2、获取URL中的参数值




        获取了URL字符串之后就是获取URL字符串中的参数数据信息。下面是几种获取参数的方法：



① 同正则表达式对比获取参数值











[javascript] view
plain copy








    

  1. 
function getQueryString(name){  

    2. 

  2. 
    var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");  

    3. 

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

    4. 

  4. 
    if (r!=null) return r[2]; return '';  

    5. 

  5. 
}  

    6. 






② split拆分法











[javascript] view
plain copy








    

  1. 
function GetRequest() {  

    2. 

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

    3. 

  3. 
    var theRequest = new Object();  

    4. 

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

    5. 

  5. 
        var str = url.substr(1);  

    6. 

  6. 
        strs = str.split("&");  

    7. 

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

    8. 

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

    9. 

  9. 
        }  

    10. 

  10. 
    }  

    11. 

  11. 
    return theRequest;  

    12. 

  12. 
}  

    13. 

  13. 
var Request = new Object();  

    14. 

  14. 
Request = GetRequest();  

    15. 

  15. 
// var id=Request["id"];   

    16. 

  16. 
// var 参数1,参数2,参数3,参数N;  

    17. 

  17. 
// 参数1 = Request['参数1'];  

    18. 

  18. 
// 参数2 = Request['参数2'];  

    19. 

  19. 
// 参数3 = Request['参数3'];  

    20. 

  20. 
// 参数N = Request['参数N'];  

    21. 






③ 单个参数的获取方法











[javascript] view
plain copy








    

  1. 
function GetRequest() {  

    2. 

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

    3. 

  3. 
    if (url.indexOf("?") != -1) {  //判断是否有参数  

    4. 

  4. 
        var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串  

    5. 

  5. 
        strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）  

    6. 

  6. 
        alert(strs[1]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）  

    7. 

  7. 
    }  

    8. 

  8. 
}  

    9. 










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





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



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











[javascript] view
plain copy








    

  1. 
//点击搜索  

    2. 

  2. 
$("#searchBtn").click(function(){  

    3. 

  3. 
    var searchText= jQuery.trim($(".keyword").val());  

    4. 

  4. 
   var searchUrl =encodeURI("search.html?searchText="+searchText);   //使用encodeURI编码  

    5. 

  5. 
   window.location.href =searchUrl;  

    6. 

  6. 
})  

    7. 










[javascript] view
plain copy








    

  1. 
//获取 上一个搜索页面传来的参数  

    2. 

  2. 
     var searchUrl =window.location.href;  

    3. 

  3. 
     var searchData =searchUrl.split("=");        //截取 url中的“=”,获得“=”后面的参数  

    4. 

  4. 
     var  searchText =decodeURI(searchData[1]);   //decodeURI解码  

    5. 

  5. 
       $(".keyword1").val(searchText);            //将搜索的数据显示在搜索页面的搜索框中  

    6. 





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


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



url转码



















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



 url转码



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



 url转码



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



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




															

																					

								

									相关推荐