簡單的前端js+ajax 購物車框架(入門篇)

 

其實,一直想把自己寫的一些js給總結下,也許是能力有限不能把它完美結合起來。隻能自己默默的看著哪些代碼,無能為力。

今天在公司實在沒有事做,突然就想到寫下商城的購物車的前端框架,當然我這裡隻有購物車的增刪改查,也許寫的並不是那麼完善,但最重要的是一個入門,也希望js達人給些建議,好讓我更上一個臺階。

HOHO~~~開始咯:

Js:

 

//為瞭省事,就沒寫自己的js ajax瞭 用瞭jquery的,當然你也可以添加到jquery的擴展方法內,哈哈,我太懶瞭,所以就寫這裡瞭。

var _$ = { AJAX: function (urlparm, d, beforecall, successcall) {

    $.ajax({

        url: "ashx/ajax_shoppingCart.ashx?" + urlparm,

        data:d,

        dataType:"Json",

        type: "POST",

        before: beforecall,

        success:successcall

    });

}

};

(function () {

    var Jusoc = {};

    Jusoc = {

        _inital: function () { window.Jusoc = Jusoc; },

        Base: {},

        DAO: {},

        BLL: {},

        UI: {}

    }

    Jusoc.Base = {

        Validate: {

        }

    }

//AJAX()

Jusoc.DAO = {

    Shopping: {

        Get: function (beforecall, successcall) {

            _$.AJAX("action=get", null, beforecall, successcall);

        },

        Remove: function (pid, beforecall, successcall) {

            _$.AJAX("action=remove", { "pid": pid }, beforecall, successcall);

        },

        Add: function (pid, pcount, beforecall, successcall) {

            _$.AJAX("action=add", { "pid": pid, "pcount": pcount }, beforecall, successcall);

        },

        Set: function (pid, pcount, beforecall, successcall) {

            _$.AJAX("action=set", { "pid": pid, "pcount": pcount }, beforecall, successcall);

        }

    }

}

Jusoc.BLL = {

    Shopping: (function () {

        var Data = null; 

        var isLock = false;

        var _successcall = null;

        var _beforecall = null;

        function Unlock() {

            isLock = false;

        }

        function Lock() {

            isLock = true;

            if(Data&&Data !=null)

            {

            Data = null;

            }

        }

        function CallBackFunction(xhr) {

            Unlock();

//            if (xhr[0] == "ERROR") {

 

//                alert(xhr[1]);

//                return;

//            }

//            else if (xhr[0] == "SUCCESS") {

//                Jusoc.BLL.Shopping.SetData(xhr[1]);

//            }

 

            Jusoc.BLL.Shopping.SetData(xhr);

           

            if (_successcall != null && _successcall) {

                _successcall.call(window, xhr);

            }

            _successcall = null;

        }

        function PrepareRequst(beforecall, successcall) {

            if (isLock) {

                return false;

            }

            Lock();

            if (beforecall != null && beforecall) {

                _beforecall = beforecall;

            }

            if (successcall != null && successcall) {

                _successcall = successcall;

            }

        }

        return {

            Get: function (beforecall, successcall) {

                if(PrepareRequst(beforecall, successcall)==false)return false;

                Jusoc.DAO.Shopping.Get(_beforecall, CallBackFunction);

            },

            Remove: function (pid, beforecall, successcall) {

               if(PrepareRequst(beforecall, successcall)==false)return false;

                Jusoc.DAO.Shopping.Remove(pid, _beforecall, CallBackFunction);

            },

            Set: function (pid, pcount, beforecall, successcall) {

                if(PrepareRequst(beforecall, successcall)==false)return false;

                Jusoc.DAO.Shopping.Set(pid, pcount, beforecall, CallBackFunction);

            },

            Add: function (pid, pcount, beforecall, successcall) {

                if(PrepareRequst(beforecall, successcall)==false)return false;

                Jusoc.DAO.Shopping.Add(pid, pcount, _beforecall, CallBackFunction);

            },

            GetData: function () {

            //alert(Data);

                return Data;

            },

            SetData: function (data) { Data = data; },

            RemoveData: function () {

                if (Data != null && Data)

                    Data= null;

            }

        }

    })(),

    XHR: {

    }

}

Jusoc.UI = {

    ShoppingCart: (function () {

        function Constract() {

            Jusoc.BLL.Shopping.Get(null,SetShoppingCart);

        }

        function SetShoppingCart(data) {

            //這裡來填充購物車中的數據

            var data = Jusoc.BLL.Shopping.GetData();

 

            //這裡 先構建 整個的購物車

            var html = "<table class=\"shoppingcart-list\" id=\"sm\">"+

                        "<tr>"+

                        "<th>"+

                        "書啊"+

                        "</th>"+

                        "<th>"+

                        "書名"+

                        "</th>"+

                        "<th>"+

                        "  單價"+

                        "</th>"+

                        "<th>"+

                        "   數量"+

                        "</th>"+

                        "<th>"+

                        "   操作"+

                        "</th>"+

                        "</tr>";   

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

                        {

                        html += "<tr>"+

                                "<td>"+

                                "<img src=\"ss\" height=\"36px\" width=\"28px\"/>"+

                                "</td>"+

                                "<td>"+

                                  data[i].Name+

                                "</td>"+

                                "<td>"+

                                "¥"+data[i].Money+

                                "</td>"+

                                "<td>"+

                                "<p class=\"item-change\">"+

                                "<input type=\"text\" value='"+data[i].Count+"' />"+

                                "<span title=\"數量加一\" class=\"add\" onclick=\"Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span> <span "+

                                "title=\"數量減一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span>"+

                                "</p>"+

                                "</td>"+

                                "<td>"+

                                "<span class=\"RemoveLink\" onclick=\"Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)\">Remove From Cark</span>"+

                                "</td>"+

                                "</tr>";

                        }

                        html+="</table>";

                        document.body.innerHTML+=html;

        }

        function AddToPanel(data) {

            //這裡是對 添加一個商品到購物車 來修改前臺樣式

           

            var obj = document.getElementById("sm");

     

            var html =   "<td>"+

                                "<img src=\"soo\" height=\"36px\" width=\"28px\"/>"+

                                "</td>"+

                                "<td>"+

                                  data.Name+

                                "</td>"+

                                "<td>"+

                                "¥"+data.Money+

                                "</td>"+

                                "<td >"+

                                "<p class=\"item-change\">"+

                                "<input type=\"text\" value='"+data.Count+"' />"+

                                "<span title=\"數量加一\" class=\"add\" onclick=\"Jusoc.UI.ShoppingCart.Plus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span> <span "+

                                "title=\"數量減一\" class=\"cut\" onclick=\"Jusoc.UI.ShoppingCart.Minus(1,this.parentNode.childNodes[0].value,this.parentNode.childNodes[0])\"></span>"+

                                "</p>"+

                                "</td>"+

                                "<td>"+

                                "<span class=\"RemoveLink\" onclick=\"Jusoc.UI.ShoppingCart.Remove(1,this.parentNode.parentNode)\">Remove From Cark</span>"+

                                "</td>";

 

                                      var row = obj.insertRow(1);

                                        row.innerHTML = html;

                                    return;

                                obj.childNodes[0].innerHTML += html;

        }

        function UpdatePanel(obj, count) {

            //這裡是從購物車中 增加 或者 減少 修改操作

            obj.value = count;

        }

        function RemoveFromPanel(child)

        {

            var obj = document.getElementById("sm");

                obj.childNodes[0].removeChild(child);

        }

        return {

            PageLoad: function () {

            Constract();

            },

            Add: function (pid, pcount) {

                Jusoc.BLL.Shopping.Add(pid,pcount, null, AddToPanel);

            },

            Plus: function (pid, pcount, obj) {

                pcount = parseInt(pcount) + 1;

                Jusoc.BLL.Shopping.Set(pid, pcount, function () { alert("before") }, function (data) { UpdatePanel(obj, pcount) });

            },

            Minus:function(pid,pcount,obj){

                pcount = parseInt(pcount) – 1;

                Jusoc.BLL.Shopping.Set(pid,pcount,null,function(data){ UpdatePanel(obj,pcount)});

            },

            Remove:function(pid,obj){

                Jusoc.BLL.Shopping.Remove(pid,null,function(data){ RemoveFromPanel(obj);});

            }

        }

    })()

}

Jusoc._inital();

})()

view sourceprint?

<BR>

  Tips:這裡的顯示頁面僅僅是demo,如需要,可以自己定制。

  HTML:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 

<html xmlns="https://www.w3.org/1999/xhtml">

<head>

    <title></title>

    <style type="text/css">

        *{margin:0; padding:0;border:0}

    body{font-size: .85em;font-family: Verdana,Helvetica,SimSun,Arial, "Arial Unicode MS" ,MingLiu,PMingLiu, "MS Gothic" ,sans-serief;color: #232323;text-align:center;  font-size:12px;  background-color: #fff;}

    #ltRight {width: 722px;float: left;position: relative;padding: 16px 40px;text-align:left}

    /*shoppingcart-list*/

    .shoppingcart-list{border: 1px solid #C2D8ED;border-collapse: collapse;color: #666666;width: 750px;}

    .shoppingcart-list th{background-color: #F1F7F9;color: #666;font-size: 13px;text-align: center;}

    .shoppingcart-list tr{border: 1px solid #C2D8ED;line-height: 25px;text-align:center;}

    .shoppingcart-list tr:hover{background-color: #fff;}

    th, td{padding-left: 5px;}

   

    .item-change{font: 12px/74px Arial;text-align: center;width: 58px;padding: 28px 0 0 25px;height: 46px;}

    .item-change input{width: 36px;height: 19px;border: 1px solid #C4C4C4;background: white;float: left;margin-top: 1px;text-align: center;line-height: 19px;margin-right: 1px;font-size: 12px;}

    .item-change span{width: 17px;height: 8px;float: left;display: block;margin-top: 1px;font-size: 0;line-height: 0;border: 1px solid #C9C9C9;text-indent: -9999px; cursor:pointer}

    .item-change .add{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -58px;}

    .item-change .cut{background: url(Images/leftmenu/icon_cart.gif) no-repeat 6px -67px;}

    .box_window {width: 204px;position:absolute;left:-9999px;}

    .box_window .updateTip{width: 184px;border: solid 1px #DFC9B2;background-color: #FDF2E3;line-height: 20px;padding: 11px 8px 8px;}

    .t_c {text-align: center;}

    .c_red_s {color: #C30;font-weight: bold;}

    .box_window .c_b {width: 9px;height: 6px;margin: 0 auto;background: url(Images/leftmenu/p_window_b.gif) no-repeat;position: relative;margin-top: -1px;font-size: 0;overflow: hidden;}

    .RemoveLink{ cursor:pointer}

   

    </style>

    <script src="../js/jquery-1.6.js" type="text/javascript"></script>

    <script src="Js/base.Jusoc.js" type="text/javascript"></script>

    <script type="text/javascript">

        window.onload =function () {

            Jusoc.UI.ShoppingCart.PageLoad();  

           

        }

    </script>

</head>

<body>

   

<p id="ltRight">

    <h5 class="htitle">

        購物車

        <span style="float:right; padding-right:20px;">總金額:¥<em id="cart-total"></em></span>

    </h5>

    <p id="update-message" style="text-align: left; text-indent: 48px; font-weight: bold;

        padding: 6px;">

    </p>

 

 

    <p id="item-tip" class="box_window">

        <p class="updateTip">

            <p class="t_c">

                修改成功!</p>

            <p>

                您的商品總金額為¥<span class="c_red_s" id="update_total_account">@Model.Total.ToString("0.00")</span>元</p>

            <p class="t_c">

                <a href="javascript:void(0)" onclick="$('#item-tip').css('left','-9999px');">關閉</a></p>

        </p>

        <p class="c_b">

        </p>

    </p>

 

    <h5><a href="javascript:Jusoc.UI.ShoppingCart.Add(1,1)">Add one to Shopping Cart</a></h5>

</p>

 

</body>

</html>

 

<BR>

  

ashx:這個我就不就木有必要黏貼出來瞭,根據自己的業務去寫額。

總結:OK,搞定!

 

 

作者:歐西

發佈留言