论坛 › Web密训营 › 技法77 (◐‿◑) 获取地址栏URL参数 | 【甜蜜】

不二如是 发表于 2017-11-4 11:34:02

技法77 (◐‿◑) 获取地址栏URL参数 | 【甜蜜】

本帖最后由 不二如是 于 2017-11-4 11:34 编辑

http://xxx.fishc.com/forum/201705/05/225545py2j222x5z6x55n2.png

按照提示，完成代码，秀秀你的编程能力！

不许看答案，否则打屁屁



分析：
        在Js中经常要获取URL的参数来执行不同的业务。例如：在一些Web服务中，通过URL中的”？userID=1“来显示不同的网页，像微博就是通过“ ／u/用户ID编号”的组合形式来访问不同的个人空间。
        ?，起到触发作用（只写一次）
        &，连接不同参数


   



Code：

HTML：
<h2>获取地址栏URL的参数</h2>
    <p id='getURLArgs'></p>

JS：
<script type="text/javascript">
    window.onload = function(){

      function getURLArgs(e){// 获取地址栏URL的参数
            var args = "空",//试着在浏览器添加参数
                  _args = [];
            u = window.location.href,
                  s = u.indexOf("?"),
                  i = 0,
                  l = 0,
                  o = null;

            if(s != -1){//如果不等于-1则存在参数
                args = u.substr(s+1).split("&");
            }
            e. innerHTML = "参数会以逗号分隔：" + args;
            l = args.length;
            for(; i < l; i++){
                if(args){
                  o = args.split("=");
                  //相同的参数以后边添加的参数为主，会覆盖前面的参数
                  _args] = o;
                }
            }

            console.log(_args);//打印参数列表
            return _args;
      }
      //获取地址栏URL的参数
      getURLArgs(document.getElementById("getURLArgs"));
    };
</script>



请按照自己的理解订正对概念的认知

代码说明（秀智商）{:10_256:} ：
**** Hidden Message *****



回顾：

技法76(◐‿◑)独家防‘URL’中文乱码



源代码：



○面试题索引贴●
如果喜欢，请订阅{:10_303:} ：
HTML5 - 庖丁解牛 + JavaScript - 庖丁解牛


如果喜欢，别忘了评分{:10_281:} ：

http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif

mhb789456 发表于 2018-7-17 17:36:42

查看一下

dsa159245 发表于 2018-7-18 17:06:20

        window.onload = function(){
                                var oInput = document.getElementsByTagName("input");
                                oInput.onclick = function(){
                                        var str = window.location.href;
                                        var n = str.indexOf("?");
                                        if(n == -1){
                                                alert("参数不存在");
                                                return;
                                        }
                                        str = str.substr(n+1);
                                        var s= "";
                                        var arr = str.split("&");
                                        for(var i = 0; i < arr.length; i++){
                                                var a = arr.split("=");
                                                s += "参数"
                                                s += a;
                                                s += ":";
                                                s += a+"    ";
                                        }
                                       
                                        alert(s);
                               
                                }
                        };

热爱前端的肥仔 发表于 2018-8-9 15:49:36

对URL的理解不是很好，需要注解

凌乱大帅比 发表于 2018-9-18 09:19:55

没看懂....

a211827754 发表于 2018-9-20 13:06:44

emmm

wangdxf 发表于 2019-4-14 15:53:36

{:5_102:}

Ruide 发表于 2019-11-12 20:10:14

甜蜜

peanutfs13 发表于 2023-9-22 11:39:43

1

孙忠亮 发表于 2023-11-13 14:07:26

1

查看完整版本: 技法77 (◐‿◑) 获取地址栏URL参数 | 【甜蜜】