葡萄藤PPT

js页面传参

分享人：北京-web-刘其勇

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

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传参

var id = getUrlParam("id"); var order_num=getUrlParam("order_num") var owner_mobile = getUrlParam("owner_mobile"); var carriager_mobile = getUrlParam("carriager_mobile");

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;

5。编码实战

6.扩展思考

有哪些场景需要进行页面传参
还有哪些方便的方法获取参数

7.参考文献

1.url介绍

2. url:#

3.url:?

4. 获取url的各部分

8.更多讨论

URL与URI的区别

URL传参与本地存储传参的利弊

js页面传参

1.背景介绍-

URL中的？、#、&

2.知识剖析

url传参：添加参数与获取参数

获取url里的参数

.split()方法

3.常见问题

4.解决方案

5。编码实战

6.扩展思考

7.参考文献

8.更多讨论

谢谢观看