发表于: 2017-04-19 00:10:02

1 1375


小课堂: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.解决方案

  1. 依赖--$stateParams服务
     angular.module('myApp')   
  2.     .controller('addNewCtrl',function ($scope,$http, $state,$stateParams) {
  3. 传递参数
                           接收参数的页面的控制器: url:'/addNew?id&name',                        
    .state('tab.addNew', { 
  4.  url:'/addNew?id',   
  5. templateUrl:'views/addNew.html',
                               
  6.  controller:'addNewCtrl',                           
  7. resolve:{                        

  8.   视图层(ui-router的方法):‘
  9. ui-sref="tab.addNew({id:company.id})
  10. 获取参数 
  11.  $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

视频链接:https://v.qq.com/x/page/f03946p04pa.html

文本链接:http://jnshu.com/daily/20874?uid=6039


今日完成

小课堂: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,所以还是要安排好时间。




返回列表 返回列表
评论

    分享到