Html獲取Url參數


轉:https://blog.csdn.net/qq_41485414/article/details/79577879

 

做web前端的開發很多的時候都會遇到的一個很簡答的問題,就是兩個頁面之間的跳轉,一般來說是:

<a href = "www.baidu.con">測試</a>

這樣的沒有參數的一般是最簡單的,可以跳轉是因為<a>的href屬性,但是一般在做項目的時候是不會只僅僅跳轉的一般是帶有一個或者是多個參數的,然后在下一個頁面將參數傳遞過去,這個時候很多的方法都是可以取到的,今天說的是基於jQuery取參數(雖然很簡單,但是照顧新手,還是舉個例子來說吧)

    <!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頁面,顯示的效果是:

這個時候我們是寫了兩個參數的,name和id,這個時候我們寫一段js:

    /*獲取到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打開:

    <!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參數頁面:

ok,總結一下就是:

將js封裝起來作為一個工具,以后需要取值的時候可以直接用,直接調用里面的函數就是可以的:

 

$.getUrlParam('name');//name就是您參數里面的名字  然后將取出來的參數賦值給一個變量,就可以在當前頁面獲取到了

不要嫌我啰嗦,說那么簡單的一個操作寫的那么麻煩,因為我也是從很菜的時候過來的,我知道很多的時候我們認為很簡單的操作對於一個新手來說根本看不懂,所以贅述有時候是對大家的照顧。鄙人有自己的關於手機的網站搞機族,有興趣的朋友可以看看。謝謝
更新

更新時間:2019-3-12

更新內容:使用這個方法直接獲取中文的會出現亂碼的問題,這是因為瀏覽器會將您的中文解析,我們需要改一下寫法:

    function GetQueryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if(r != null) return decodeURI(r[2]);
                return null;
            }

這樣就可以了!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM