用js可以添加类似的内容(如电影网站里的每一个电影盒子),但是链接过去的网站怎么办?一个一个写?会累死的。那么这里就用到了数据传递。(这里仅传递数据,添加内容还需要进行数据匹配)
(例子均为个人练习所写,有部分无关代码,忽略掉)

<li><a href="book.html?type=种春风" target="_blank"><img src="data:images/book1.jpg" alt="种春风"><div class="right"><h2>种春风</h2><h4>黄裳瑾瑜</h4><p>写给所有的姑娘们。愿我们——有得有失有坚持,能笑能哭能尽欢,种桃种李种春风。</p></div></a>
</li>

a元素的herf是我写的一个子网页,算是一个模板吧
可以看到这里我在html后面加了一个*?* 这个*?*是用来分割跳转路径和参数的
后面这个type是参数名,然后这个参数的值是 种春风
这里我们可以随便看一下一个百度页面

https://www.baidu.com/s?ie=utf-8&f=8&rsv_bp=1&rsv_idx=1&tn=baidu&wd=js&rsv_pq=f066319004430531&rsv_t=77ccsHi2aPnWya21ra3naDtFMLP1163NvJxqYbd7i3IuZIFYsbffyUSw2e8&rqlang=cn&rsv_enter=1&rsv_dl=tb&rsv_sug3=5&rsv_sug1=6&rsv_sug7=101&rsv_sug2=0&inputT=1693&rsv_sug4=2760

看到baidu.com…后面有个*?*,还有个 ie参数,值是 utf-8
还有个 *&*这个符号,至于 *&*的用处嘛,要这样想,既然路径和参数之间要用?分割,那么参数之间用什么分割呢,就用这个&,这个是分割参数的

现在跳转页面试试

看导航栏会发现参数已经在url上了

那么现在我们就可以拿这个值来搞事情了

想搞事情当然得先拿到这个值,怎么拿?当然是用js拿了

用这个值当然是打开页面的时候就要拿到了,所以

//这里表示页面加载完成试运行里面的函数
window.onload = function () {}

因为现在不知道那个值放在哪,所以

window.onload = function() {console.log(window);
}

去控制台上找这个值(?type=…)

发现参数在window对象中的document属性中的location属性中的search属性下
所以这个值就是window.document.location.search
可以在控制台上打印这个看一下

这个上面是我用vue的原因,正常应该是没有东西的
这时会发现传过来的不是自己想要的值,而是一串乱码,很烦很难受,怎么解决呢?
找别人的博客。。。

JavaScript之location.search中文乱码的问题

(虽然自己垃圾,但总有牛逼的人供我学习啊

网页通过url传递数据相关推荐

  1. AngularJS + Java---前台网页与后台数据库传递数据 基本结构

    第一个关于这两种语言的项目,以下只是我自己的理解,欢迎指教:) 基本对应关系 1. controller .jsp(.html)  ng-controller="controllerTest ...

  2. 关于js渲染网页时爬取数据的思路和全过程(附源码)

    于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ...

  3. 多页面之间传递数据的方法

    传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越.服务器后台进行数据请求等,都需要一个或多个传参的方法. 那么参数在 ...

  4. JS的传递数据不刷新页面的应用

    以下文章纯是转抄,只因其中有一些东西是要用的,又怕忘掉,所以-.作者看到可不要生气哟! ------------------------- 结合我最近的学习经历.整理一下jsp和js的混合应用的一个方 ...

  5. 通过html调起app,并传递数据

    一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 <html><head><meta http-equiv="Conte ...

  6. html用vue传递数据,Vue组件及数据传递详解

    本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ...

  7. 动态加载子节点_微信小游戏开发之场景切换和常驻节点传递数据

    主题 场景切换 场景间数据传递方式 小游戏全局背景音效 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ...

  8. android 网络编程--URL获取数据/图片

    首先,开始最简单的网络编程实战,URL实现网络连接,不懂的童鞋可以参考JAVA中的URL编程,其原理是一样的,在这里不再多做解释. 直接贴出实现源代码: public class DataActivi ...

  9. ASP.NET页面通过URL传递参数(一)(转载)

    解决的方法一般有3种: 1.设置web.config文件 <system.web>  ......  <globalization requestEncoding="gb2 ...

最新文章

  1. [爬虫学习笔记]C# 使用 ScrapySharp 并行下载天涯图片
  2. AI:2020年6月22日北京智源大会演讲分享之11:30-12:20Jorge教授《Zero-Order Optimization Methods with Applications to RL》
  3. 单片机方波幅度调节c语言,为什么我用单片机做的频率可调的方波输出会有尖刺,而且会断...
  4. egret:什么是脏矩形
  5. Java依赖注入选项
  6. Problem Collection II 构造
  7. linux --- vsftp
  8. 用MDT 2012为企业部署windows 7(四)--创建Deploymentshare共享以及介绍一些选项的具体作用...
  9. 十问:BAT技术大牛的核心学习方法
  10. 直播行业市场分析:2022年构建多元化的直播生态体系
  11. 复利思维,您做到了吗?
  12. 计算机教学考核方案,计算机专业技能课教学目标考核方案_图文.pdf
  13. win10热点开启后,手机可以连上热点但无法连接网络
  14. thinkpad无线键盘使用问题
  15. matlab解五元方程,哪位大侠帮忙解这个五元四次方程组
  16. git的本地仓库在哪里
  17. 计算机信息安全论文参考文献,信息安全学论文参考文献 信息安全核心期刊参考文献哪里找...
  18. Linux 浅薄的认知笔记
  19. 微信小程序:超强大微信小程序源码下载内含几十款功能王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益
  20. 分享保护视力应用桌面

热门文章

  1. signal信号捕捉
  2. ANO V7上位机协议程序(新版加入DMA形式发送接收)
  3. 马云:不要买房了,未来房子如葱!10年后最便宜的是房子车子,而最贵的是…...
  4. 手机个人邮箱怎么注册,手机邮箱注册登录
  5. 基于python的影评数据分析_基于Python聚焦型网络爬虫的影评获取技术
  6. 你以为 CSS 只是个简单的布局?
  7. 微星RTX 4090和RTX 4080 SUPRIM参数对比评测
  8. 从360遇上苹果说起
  9. Eclipse报错:The import org.apache cannot be resolved
  10. 修改cmd命令窗口的编码格式