> 웹 프론트엔드 > JS 튜토리얼 > jQuery가 json과 쿠키를 기반으로 장바구니를 구현하는 방법

jQuery가 json과 쿠키를 기반으로 장바구니를 구현하는 방법

高洛峰
풀어 주다: 2017-03-15 16:22:12
원래의
1652명이 탐색했습니다.

이 기사의 예에서는 jQuery가 json 및 쿠키를 기반으로 장바구니를 구현하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 사항은 다음과 같습니다.

json 형식:

[{'ProductID':ABC','Num':'1'},{'ProductID':DEF,'Num':'2'}]
로그인 후 복사

여기에서는 $.cookie 플러그인이 사용됩니다. 이 플러그인의 코드는

/*
添加商品及数量到购物车cookie中,返回当前商品在cookie中的总数
*/
function AddToShoppingCar(id, num) {
  var _num = 1;
  if (num != undefined)
    _num = num;
  var totalNum = _num; //总数默认为传入参数
  var cookieSet = { expires: 7, path: '/' }; //设置cookie路径的
//  $.cookie(cookieProductID, null, cookieSet);//清除Cookie
  var jsonStr = "[{'ProductID':'" + id + "','Num':'" + _num + "'}]"; //构造json字符串,id是商品id  num是这个商品的数量
  if ($.cookie(cookieProductID) == null) {
    $.cookie(cookieProductID, jsonStr, cookieSet); //如果没有这个cookie就设置他
  }
  else {
    var jsonObj = eval('(' + $.cookie(cookieProductID) + ')'); //如果有,把json字符串转换成对象
    var findProduct = false;//是否找到产品ID,找到则为TRUE,否则为FALSH
    for (var obj in jsonObj) {
      if (jsonObj[obj].ProductID == id) {
        jsonObj[obj].Num = Number(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;
    }
    $.cookie(cookieProductID, JSON.stringify(jsonObj), cookieSet); //写入coockie  JSON需要json2.js支持
  }
  return totalNum;
  //  alert($.cookie(cookieProductID));
}
로그인 후 복사
rrree

기사의 마지막 부분에 있습니다. 이 기사가 jQuery 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.

JQuery의 json과 쿠키 기반 장바구니 구현 방법에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!

관련 기사:

PHP 초보자 장바구니 구현 원칙

네이티브 js 시뮬레이션 Taobao 장바구니 프로젝트 실제 전투

JS는 그림과 코드가 포함된 간단한 장바구니를 구현합니다.

php는 간단한 추가를 구현합니다. -to-cart 그래픽 코드 상세 소개

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿