发表于: 2017-04-25 21:54:37

1 1201


js有哪几种传参方式

小课堂【成都第九十二期】

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

在“单机”模式下,只需要使用其本身所建立的变量即可。显然,在如今的前端环境,一个稍微正式点的项目都不太可能是这个情况,页面的跨越、服务器后台进行数据请求等,都需要一个或数个传参的方法。

2.知识剖析

几种常见的传参方式

1,localStorage和sessionStorage

将数据存储在localStorage中,如果不使用removeItem()或者delete删除,或者用户未清楚浏览器缓存,数据会一直保留在磁盘上,一般它的大小有5M的限制。另外,要访问同一个localStorage对象,页面必须来自同一个域名(子域名无效),使用同一个协议,在同一个端口上

而数据存储在sessionStorage中,该数据只保持到浏览器关闭,因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储

他们都属于storage类型,因此拥有storage类型的方法

保存数据:setItem(key,value); 
读取数据:getItem(key); 
删除单个数据:removeItem(key); 
删除所有数据:clear(); 
得到某个索引的key:key(index);

2,cookie传递参数

HTTP Cookie,通常直接叫做cookie,Cookie是浏览器访问服务器后,服务器传给浏览器的一段数据。

目前有些 Cookie 是临时的,有些则是持续的。临时的 Cookie 只在浏览器上保存一段规定的时间,一旦超过规定的时间,该 Cookie 就会被系统清除.

3,URL传递参数

一个完整的网页地址大致分成protocol、host、path、search、hash五部分,其中search和hash(?号以后的数据)是我们可以在程序中作为参数部分进行传递。在网页初始化的时候读取search和hash的数据然后进行一系列操作,而search(?name=张三&type=admin)也常用作后台的请求参数。

4,ajax

AJAX 是一种用于创建快速动态网页的技术。 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

3.常见问题

localStorage和sessionStorage的使用

4.解决方案

 //把值存入本地

var live_kill=3;

var arr_kill={

    killer:2,

    live:8,

    people:[{name:"平民",id:1},{name:"杀手",id:2}]

}

localStorage.livekill=live_kill;

localStorage.arr_killer=JSON.stringify(arr_kill);

//取出本地存储的值

var arr_kill=JSON.parse(localStorage.arr_killer);

var live_kill=localStorage.livekill;

5.编码实战

下面是url方法和ajax的简单例子,有兴趣可以阅读一下:

URL

$(function() {  

    //获取url中传来的数据  

    var openId = getParamValue("openId");  

    //当传递过来的数据中包含有中文数据的时候,需要在添加编码设置,                                                                 

    //也就可以写成这样:var name = decodeURI(getParamValue("userName"));这样写的话                                                              

    //就可以正确获得中文字符。  

});  

//分解url获得数据部分  

function getUrlParams() {  

    var search = window.location.search;  

    // 写入数据字典   

    var tmparray = search.substr(1, search.length).split("&");  

    var paramsArray = new Array;  

    if (tmparray != null) {  

        for (var i = 0; i < tmparray.length; i++) {  

            var reg = /[=|^==]/; // 用=进行拆分,但不包括==   

            var set1 = tmparray[i].replace(reg, '&');  

            var tmpStr2 = set1.split('&');  

            var array = new Array;  

            array[tmpStr2[0]] = tmpStr2[1];  

            paramsArray.push(array);  

        }  

    }  

    // 将参数数组进行返回   

    return paramsArray;  

}  

// 根据参数名称获取参数值   

function getParamValue(name) {  

    var paramsArray = getUrlParams();  

    if (paramsArray != null) {  

        for (var i = 0; i < paramsArray.length; i++) {  

            for (var j in paramsArray[i]) {  

                if (j == name) {  

                    return paramsArray[i][j];  

                }  

            }  

        }  

    }  

    return null;  

}  

ajax

function orderCancel(orderId, commant){  

    var flag = false;  

    $.ajax({  

        type: "POST",  

        url: "../order/orderCancel.action", //orderModifyStatus  

        data: {"orderId":orderId,"commant":commant},  

        dataType:"json",

        success: function(data){  //参数正确执行

            var member = eval("("+data+")"); //包数据解析为json 格式                                                            

            if(member.success=="true"){  //请求成功执行

                flag = true;  

            }else if(member.success=="false") {  //请求失败执行

                alert(member.info);  

            }  

        },  

        error: function(json){  //参数错误执行

            alert("订单取消异常,请刷新后重试...");  

        }  

    });  

    hidediv();  

    return flag;  

}

6.扩展思考

JS的几种传参方式在什么情况使用比较好?

7.参考文献

参考一:url方法

参考二:ajax方法

8.更多讨论



返回列表 返回列表
评论

    分享到