发表于: 2017-04-19 00:10:02
1 1373
小课堂:js页面传参
js页面传参
1.背景介绍-
URL中的?、#、&
protocol :// hostname[:port] / path / [;parameters][?query]#fragment ①
http://localhost:8088/home/class/?name=qiyong&uid=6039#css
- ?:查询--给动态网页传递参数,键和值用=链接,多组用&隔开③
- #:信息片段,指定页面中的片段②
2.知识剖析
页面传参的两种方法
- url传参
- 本地存储(cookie、session storage、locacl storage)
url传参:添加参数与获取参数
添加参数和跳转
js和jquery的页面跳转方法均可带参数跳转:
location.href="url?"+"name="+value
window.open("url?"+"name="+value)等
ajax方法的url和param也可以用来在url里添加参数,只是不会跳转页面。
获取url里的参数
获取当前页面的URL:window.location.href
获取URL中参数的部分:window.location.search④
获取URL内的参数:
使用.split()进行切割
http://s.weibo.com/weibo/web?topnav=1&wvr=6&b=1
.split()方法
var str=location.search.split("?")[1].split("&");
var par=[];
for(var i=1;i<=str.length;i++)
{par[i-1]=str[i].split("=")}
3.常见问题
angularJs如何进行URL传参
4.解决方案
- 依赖--$stateParams服务
angular.module('myApp') - .controller('addNewCtrl',function ($scope,$http, $state,$stateParams) {
- 传递参数
接收参数的页面的控制器: url:'/addNew?id&name',.state('tab.addNew', {
url:'/addNew?id',
templateUrl:'views/addNew.html',
controller:'addNewCtrl',
resolve:{
- 视图层(ui-router的方法):‘
- ui-sref="tab.addNew({id:company.id})
- 获取参数
- $scope.id=$stateParams.id;
6.扩展思考
- 有哪些场景需要进行页面传参
- 还有哪些方便的方法获取参数
- 一个封装的函数用于页面传参--
7.参考文献
1.url介绍
2. url:#
3.url:?
4. 获取url的各部分
8.更多讨论
URL与URI的区别
URL传参与本地存储传参的利弊
PPT链接:https://ptteng.github.io/PPT/PPT/js-03-pass-param-between-pages
今日完成
小课堂:js页面传参。
讨论的内容:
》URL与URI的区别:
Uniform Resource Identifier (URI)(统一资源标识符) 是一个紧凑的字符串用来标示抽象或物理资源
URI 可以进一步被分为定位符、名字或两者都是. 术语“Uniform Resource Locator” (URL) (统一资源定位符)是URI的子集, 除了确定一个资源,还提供一种定位该资源的主要访问机制(如其网络“位置”)。
关系:URL∈URI; URL包含于URI; 所有的URL都是URI,URI可以是URL/URN/URI
》完整的URL的格式:
协议://用户名:密码@子域名.域名.顶级域名:端口号/目录/文件名.文件后缀?参数=值#标志
》如何处理url中真正需要的而不是用来标识的 “=”、“?”、“&”等
答: 1 尽量不要用这些符号,因为容易混淆 2如果用,前面加转义符“\”,但是最好还是别用。
》有一个更简便的接收url内的参数的方法
--待填--也许不填了。
明日计划:
1 提交任务10
2 日常任务:日报回复,小课堂编辑,推送
3 修改任务10的页面布局。
问题:收获:
对url和uri有了更多了解
一直不了解页面url传参,通过做小课堂了解了
其实一直没多少时间做任务10,所以还是要安排好时间。
评论