jQuery基于json与cookie实现购物车的方法

/**
     * 添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数
     */
    function AddToShoppingCar(id, num, type) {
        var _num = 1;
        if (num != undefined){
            _num = num;
        }
        if (type == undefined){
            alert("请设置产品种类");
            return false;
        }
        var totalNum = _num; //总数默认为传入参数
        var cookieSet = { expires: 7, path: ‘/‘ }; //设置cookie路径的
        // $.cookie(cookieProductID, null, cookieSet);//清除Cookie
        // var jsonStr = "[{‘ProductID‘:‘" + id + "‘,‘Num‘:‘" + _num + "‘}]"; //构造json字符串,id是商品id  num是这个商品的数量
        var jsonStr = "[{‘ProductID‘:‘" + id + "‘,‘Num‘:‘" + _num + "‘,‘Type‘:‘" + type + "‘}]"; //构造json字符串,id是商品id  num是这个商品的数量
        console.log(jsonStr);
        console.log($.cookie(cookieProductID));
        if ($.cookie(cookieProductID) == null) {
            $.cookie(cookieProductID, jsonStr, cookieSet); //如果没有这个cookie就设置他

            // ============
            var jsonObj = eval(‘(‘ + $.cookie(cookieProductID) + ‘)‘); //如果有,把json字符串转换成对象
            var findProduct = false;//是否找到产品ID,找到则为TRUE,否则为FALSH
            for(var obj in jsonObj) {
                if(jsonObj[obj].ProductID == id) {
                    console.log("数量:" + parseInt(jsonObj[obj].Num));
                    jsonObj[obj].Num = parseInt(jsonObj[obj].Num);
                    totalNum = jsonObj[obj].Num;
                    findProduct = true;
                    break;
                }
            }
            if(findProduct == false){ //没找到,则添加
                jsonObj[jsonObj.length] = new Object();
                jsonObj[jsonObj.length - 1].ProductID = id;
                jsonObj[jsonObj.length - 1].Num = num;
                jsonObj[jsonObj.length - 1].Type = type;
            }
            $.cookie(cookieProductID, JSON.stringify(jsonObj), cookieSet); //写入coockie  JSON需要json2.js支持
            // ============
        }else{
            var jsonObj = eval("(" + $.cookie(cookieProductID) + ")"); //如果有,把json字符串转换成对象
            var findProduct = false;//是否找到产品ID,找到则为TRUE,否则为FALSH
            for(var obj in jsonObj) {
                if(jsonObj[obj].ProductID == id) {
                    console.log("数量:" + parseInt(jsonObj[obj].Num));
                    jsonObj[obj].Num = parseInt(jsonObj[obj].Num) + _num;
                    totalNum = jsonObj[obj].Num;
                    findProduct = true;
                    break;
                }
            }
            if(findProduct == false){ //没找到,则添加
                jsonObj[jsonObj.length] = new Object();
                jsonObj[jsonObj.length - 1].ProductID = id;
                jsonObj[jsonObj.length - 1].Num = num;
                jsonObj[jsonObj.length - 1].Type = type;
            }
            $.cookie(cookieProductID, JSON.stringify(jsonObj), cookieSet); //写入coockie  JSON需要json2.js支持
        }
        return totalNum;
        //  alert($.cookie(cookieProductID));
    }

这里使用到了 $.cookie这个插件。这个插件的代码如下:

 /**
 *创建与给定的名称和值和其他可选参数的cookie。
 *
 * @example $ .cookie(‘the_cookie‘,‘the_value‘);
 * @desc    设置cookie的值。
 * @example $ .cookie(‘the_cookie‘,‘the_value‘,{到期:7,路径:‘/‘,域名:‘jquery.com“,安全:真});
 * @desc    创建一个cookie与所有可用的选项。
 * @example $ .cookie(‘the_cookie‘,‘the_value‘);
 * @desc    创建一个会话cookie。
 * @example $ .cookie(‘the_cookie‘,NULL);
 * @desc    由空传递的值删除的cookie。
 *
 * @param    参数字符串名称的Cookie的名称。
 * @param    参数字符串值的cookie的值。
 * @param    参数对象的选择对象文本包含键/值对提供可选的cookie的属性。
 * @option    号码|日期到期一个整数从现在起指定到期日在天或Date对象。
 *            如果指定了负值(例如,在过去的日期),该cookie将被删除。
 *            如果设置为空或省略,cookie将是一个会话cookie并不会被保留
 *            当在浏览器退出。
 * @option    字符串路径的Cookie路径属性附加伤害值(默认值:页面的路径创建的cookie)。
 * @option    字符串域的cookie域属性的值(默认值:页面的域名创建的cookie)。
 * @option    布尔安全的,如果属实,将Cookie的安全属性将被设置和cookie的传输将
 *            需要一个安全协议(如HTTPS)。
 * @type    未定义
 *
 * @name     $ .cookie
 * @cat            插件/曲奇
 * @author    克劳斯Hartl/[email protected]
 */

/**
 * Get the value of a cookie with the given name.    获取给定名字的cookie的值。
 *
 * @example $.cookie(‘the_cookie‘);
 * @desc Get the value of a cookie.                    获取cookie的值。
 *
 * @param String name The name of the cookie.
 * @return The value of the cookie.
 * @type String
 *
 * @name $.cookie
 * @cat Plugins/Cookie
 * @author Klaus Hartl/[email protected]
 */
jQuery.cookie = function(name, value, options) {
    if (typeof value != ‘undefined‘) { // name and value given, set cookie
        options = options || {};
        if (value === null) {
            value = ‘‘;
            options.expires = -1;
        }
        var expires = ‘‘;
        if (options.expires && (typeof options.expires == ‘number‘ || options.expires.toUTCString)) {
            var date;
            if (typeof options.expires == ‘number‘) {
                date = new Date();
                date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
            } else {
                date = options.expires;
            }
            expires = ‘; expires=‘ + date.toUTCString(); // use expires attribute, max-age is not supported by IE
        }
        var path = options.path ? ‘; path=‘ + options.path : ‘‘;
        var domain = options.domain ? ‘; domain=‘ + options.domain : ‘‘;
        var secure = options.secure ? ‘; secure‘ : ‘‘;
        document.cookie = [name, ‘=‘, encodeURIComponent(value), expires, path, domain, secure].join(‘‘);
    } else { // only name given, get cookie
        var cookieValue = null;
        if (document.cookie && document.cookie != ‘‘) {
            var cookies = document.cookie.split(‘;‘);
            for (var i = 0; i < cookies.length; i++) {
                var cookie = jQuery.trim(cookies[i]);
                // Does this cookie string begin with the name we want?
                if (cookie.substring(0, name.length + 1) == (name + ‘=‘)) {
                    cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
                    break;
                }
            }
        }
        return cookieValue;
    }
};
时间: 2024-11-13 08:17:49

jQuery基于json与cookie实现购物车的方法的相关文章

cookie存储购物车数据

Cookie存储购物车数据 背景: 当用户处于未登录状态时,可以浏览商品,查看详细商品信息,也可以添加购物车. 此时数据不能存在redis中,因为redis存储数据需要以用户的身份做标识,用户不登录就没有身份标识. 所以此时的数据应该存储在本地的数据存储位置,即cookie当中. 实现思路: 客户端在详情页发送商品信息,商品信息经由vue封装成json,向服务器发送ajax请求. 视图函数接收到ajax请求,以request.body.decode()方式接收数据并且解码. 将获取的数据封装成字

Session和Cookie实现购物车

来自森大科技官方博客http://www.cnsendblog.com/index.php/?p=342GPS平台.网站建设.软件开发.系统运维,找森大网络科技!http://cnsendnet.taobao.com 使用Session和Cookie实现购物车的比较   购物车相当于现实中超市的购物车,不同的是一个是实体车,一个是虚拟车而已.用户可以在购物网站的不同页面之间跳转,以选购自己喜爱的商品,点击购买时,该商品就自动保存到你的购物车中,重复选购后,最后将选中的所有商品放在购物车中统一到付

JQuery处理json与ajax返回JSON实例[转]

json数据是一种经型的实时数据交互的数据存储方法,使用到最多的应该是ajax与json配合使用了,下面我来给大家介绍jquery处理json数据方法. 一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内部各个数据之间通过“,”分割,如[“AreaId”:”123”,”AreaId”:”345”]. 很多情况下是对象数组,那就是这样:  代码如下

Jquery.ajax报parseerror Invalid JSON错误的原因和解决方法:不能解析

(默认: 自动判断 (xml 或 html)) 请求失败时调用时间.参数有以下三个:XMLHttpRequest 对象.错误信息.(可选)捕获的错误对象.如果发生了错误,错误信息(第二个参数)除了得到 null 之外,还可能是 "timeout" , "error" , "notmodified" 和 "parsererror" . error事件返回的第一个参数XMLHttpRequest有一些有用的信息: XMLHttpR

JQuery以JSON方式提交数据到服务端

JQuery将Ajax数据请求进行了封装,从而使得该操作实现起来容易许多.以往我们要写很多的代码来实现该功能,现在只需要调用$.ajax()方法,并指明请求的方式.地址.数据类型,以及回调方法等.下面的代码演示了如何将客户端表单数据封装成JSON格式,然后通过JQuery的Ajax请求将数据发送到服务端,并最终将数据存储到数据库中.服务端定义为一个.ashx文件,事实上你可以将服务端定义为任何能接收并处理客户端数据的类型,如Web Service,ASP.NET Page,Handler等. 首

jquery处理json数据

Json简单讲就是Javascript对象或数组. Json形式一: javascript对象    { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" } Json形式二: javascript数组    [{ "firstName": "Brett", "l

jquery读写json

网易hex是个好东东啊 jquery中getJSON()用法-json文件内容遍历输出方法 http://www.111cn.net/wy/jquery/51469.htm jquery读写json,布布扣,bubuko.com

基于json数据格式实现的简单数据库——jsonDB

已在github上建立项目:https://github.com/ThinkerCodeChina/jsonDB /** +----------------------------------------- * jsonDB 基于json数据格式构建的数据模型 +----------------------------------------- * @description 对json数据检索,删除,查询和更新 * @author 戚银(web程序员) [email protected] * @

jquery 遍历 json【转】

jquery 遍历 json <HTML> <HEAD> <!-- meta 解释 : http://www.haorooms.com/post/html_meta_ds --> <meta http-equiv="content-Type"content="text/html;charset=utf-8"> <TITLE></TITLE> <style> </style>