js---原生js,url传参

js 通过url传参

模拟:

页面一(A.html)登录 传递参数 用户名 Uname 密码 Upassword
页面二(B.html)接收参数

页面一(A.html)

<body>
    <form action="B.html">
    	<!-- 必须有 name -->
        <input type="text" name="Uname"> // 用户名
        <input type="text" name="Upassword"> // 密码
        <input type="submit" value="提交">
    </form>
</body>

效果如下
在这里插入图片描述
点击提交后 参数被放进url
在这里插入图片描述
当然不止一种传值,我们可以使用 window.location.href 或者 search 直接赋值

<button onclick="clis()">s</button>
<script>
    let Uname = "chaliceJoker";
    let Upassword = "Joker123";
    function clis(){
      window.location.href = "http://127.0.0.1:5501/B.html?Uname=" + Uname;
      // window.location.search = "Upasword=" + Upassword  // 缺少跳转,适用于a标签一类
    }
</script>

页面二(B.html)

<script>
	// 定义一个变量接收url
    var query = location.search;
    console.log(query)
    // 定义一个变量截取?后的参数
    let Vals= query.split("?");
    console.log(Vals)
    // 有多个参数时使用&分割
    let OnecVal = Vals[1].split("&");
    console.log(OnecVal);
    // 循环这个对象使用等号接收 键 和 值
    for(let i=0; i<OnecVal.length;i++){
        let keyAval = OnecVal[i].split("=")
        console.log(keyAval [0],keyAval [1])
    }
</script>

最终拿到 用户名 密码
在这里插入图片描述

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值