网页通过url传递数据
用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中文乱码的问题
(虽然自己垃圾,但总有牛逼的人供我学习啊
第一个关于这两种语言的项目,以下只是我自己的理解,欢迎指教:) 基本对应关系 1. controller .jsp(.html) ng-controller="controllerTest ... 于js渲染网页时爬取数据的思路 首先可以先去用requests库访问url来测试一下能不能拿到数据,如果能拿到那么就是一个普通的网页,如果出现403类的错误代码可以在requests.get()方法里 ... 传统的前端开发中,页面之间是少有参数交互的,甚至没有,而在如今的前端环境下, 一个稍微正式点的项目都不可能少了页面间传参,页面的跨越.服务器后台进行数据请求等,都需要一个或多个传参的方法. 那么参数在 ... 以下文章纯是转抄,只因其中有一些东西是要用的,又怕忘掉,所以-.作者看到可不要生气哟! ------------------------- 结合我最近的学习经历.整理一下jsp和js的混合应用的一个方 ... 一.通过html页面打开Android本地的app 1.首先在编写一个简单的html页面 <html><head><meta http-equiv="Conte ... 本文我们就和大家详细介绍一下Vue系列(三):组件及数据传递.路由.单文件组件.vue-cli脚手架,希望能帮助到大家. 一. 组件component 1. 什么是组件?组件(Component)是 ... 主题 场景切换 场景间数据传递方式 小游戏全局背景音效 特别说明 CocosCreator微信小游戏开发系列文章,是我在逐步开发过程中,基于官方文档之上,记录一些重点内容,以及对官方文档中有些知识点的 ... 首先,开始最简单的网络编程实战,URL实现网络连接,不懂的童鞋可以参考JAVA中的URL编程,其原理是一样的,在这里不再多做解释. 直接贴出实现源代码: public class DataActivi ... 解决的方法一般有3种: 1.设置web.config文件 <system.web> ...... <globalization requestEncoding="gb2 ...网页通过url传递数据相关推荐
最新文章
热门文章