您现在的位置:首页 >> 前端 >> 内容

Html如何获取Url参数?

时间:2018/3/16 15:10:48 点击:

  核心提示:做web前端的开发很多的时候都会遇到的一个很简答的问题,就是两个页面之间的跳转,一般来说是:[html] view plain copya href = www.baidu.con测试/a 这样的没有...

web前端的开发很多的时候都会遇到的一个很简答的问题,就是两个页面之间的跳转,一般来说是:

[html] view plain copy

<a href = "www.baidu.con">测试</a>  

这样的没有参数的一般是最简单的,可以跳转是因为<a>的href属性,但是一般在做项目的时候是不会只仅仅跳转的一般是带有一个或者是多个参数的,然后在下一个页面将参数传递过去,这个时候很多的方法都是可以取到的,今天说的是基于jQuery取参数(虽然很简单,但是照顾新手,还是举个例子来说吧)

[html] view plain copy

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="UTF-8">  

        <title></title>  

        <script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>  

        <script src="../js/getUrl.js" type="text/javascript"></script>  

    </head>  

    <body>  

        <a href="jieshouURL.html?name=123&id=1234">点击测试获取url参数</a>  

    </body>  

</html>  

这是一个简单的H5页面,显示的效果是:

Html如何获取Url参数?

这个时候我们是写了两个参数的,name和id,这个时候我们写一段js:

[javascript] view plain copy

/*获取到Url里面的参数*/  

(function ($) {  

  $.getUrlParam = function (name) {  

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

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

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

  }  

 })(jQuery);  

然后我们将jieshouURL.html打开:

[html] view plain copy

<!DOCTYPE html>  

<html>  

    <head>  

        <meta charset="UTF-8">  

        <title></title>  

        <script src="../js/jquery-1.10.2.min.js" type="text/javascript"></script>  

        <script src="../js/getUrl.js" type="text/javascript"></script>  

    </head>  

    <script>  

        var name = $.getUrlParam('name');  

        var id = $.getUrlParam('id');  

        window.onload = function(){  

            $("#addname").val(name);  

            $("#addid").val(id);  

        }  

    </script>  

    <body>  

        <label>测试URL中的name是:</label>  

        <input type="text" id="addname" />  

        <label>测试URL中的id是:</label>  

        <input type="text" id="addid" />  

    </body>  

</html>  

我们点击测试URL参数页面:

Html如何获取Url参数?

ok,总结一下就是:

将js封装起来作为一个工具,以后需要取值的时候可以直接用,直接调用里面的函数就是可以的:

[html] view plain copy

$.getUrlParam('name');//name就是您参数里面的名字  然后将取出来的参数赋值给一个变量,就可以在当前页面获取到了  

不要嫌我啰嗦,说那么简单的一个操作写的那么麻烦,因为我也是从很菜的时候过来的,我知道很多的时候我们认为很简单的操作对于一个新手来说根本看不懂,所以赘述有时候是对大家的照顾。鄙人有自己的关于手机的网站搞机族,有兴趣的朋友可以看看。谢谢

Tags:HT TM ML L如 
作者:网络 来源:我真不是范冰冰老公的