javascript获取URL参数 -- 技巧⭐

最新推荐文章于 2024-11-08 16:09:18 发布

霄的超

最新推荐文章于 2024-11-08 16:09:18 发布

阅读量119

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/messchao/article/details/120540584

版权

这篇博客展示了如何使用JavaScript从URL中获取参数，并将其显示在页面上。通过`location.search`获取查询字符串，然后使用`substr`和`split`方法解析参数，最后将用户名写入页面的div元素中，实现个性化欢迎信息。

摘要由CSDN通过智能技术生成

js获取URL参数 @Draven

效果预览
html部分
css部分
js部分

效果预览

在这里插入图片描述

html部分

  <form action="index.html">
      用户名: <input type="text" name="uname">
    <input type="submit" value="登陆">
  </form>

index.html

	<div></div>

css部分

无

js部分

index.html

<script>
  console.log(location.search) // ?uname=andy
  //1.先去掉 ?     substr('起始位置'，截取几个字符)
  var params = location.search.substr(1) // uname=andy
  console.log(params)
  //2.利用=把字符串分割为数组  split('=')
  var arr = params.split('=')
  console.log(arr) // ["uname","andy"]
  //3.把数据写入div中
  var div = document.querySelector('div')
  div.innerHTML=arr[1]+'欢迎你'
</script>