Simple front-end js + ajax shopping cart framework (entry) _ javascript skills

Source: Internet
Author: User
In fact, I always want to sum up some of my own js files. Maybe it cannot be perfectly combined with limited capabilities. I can only look at the code by myself. I can't do anything in my company today. I suddenly thought of writing the front-end framework of the shopping cart of the mall. Of course, I only need to add, delete, modify, and query the shopping cart here, it may not be so well written, but the most important thing is to get started. I also hope that the js talents can give me some suggestions so that I can take a step further.
HOHO ~~~ Start:
Js:

The Code is as follows:


// In order to save trouble, I didn't write my own js ajax and used jquery. Of course, you can also add it to jquery's extension method. Haha, I am too lazy, so I wrote it here.
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 = {
_ Infound: 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 ){
// Fill in the data in the shopping cart here
Var data = Jusoc. BLL. Shopping. GetData ();
// Create the entire shopping cart first.
Var html ="









{
Html + ="







"+" "+" "+" "+" "+" "+" "+" ";For (var I = 0; I "+" "+" "+" "+" "+" "+" ";}Html + ="
"+
"Books" +
"
"+
"Title" +
"
"+
"Unit price" +
"
"+
"Quantity" +
"
"+
"Operation" +
"
"+
"" +
"
"+
Data [I]. Name +
"
"+
"¥" + Data [I]. Money +
"
"+
"

"+
""+
"" Title = \ "minus 1 \" class = \ "cut \" onclick = \ "Jusoc. UI. shoppingCart. minus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ ">" +
"

"+
"
"+
"Remove From Cark" +
"
";
Document. body. innerHTML + = html;
}
Function AddToPanel (data ){
// Add a product to the shopping cart to modify the foreground style.
Var obj = document. getElementById ("sm ");
Var html =""+
"" +
""+
""+
Data. Name +
""+
""+
"¥" + Data. Money +
""+
""+
"

"+
""+
"" Title = \ "minus 1 \" class = \ "cut \" onclick = \ "Jusoc. UI. shoppingCart. minus (1, this. parentNode. childNodes [0]. value, this. parentNode. childNodes [0]) \ ">" +
"

"+
""+
""+
"Remove From Cark" +
"";
Var row = obj. insertRow (1 );
Row. innerHTML = html;
Return;
Obj. childNodes [0]. innerHTML + = html;
}
Function UpdatePanel (obj, count ){
// Add or remove modifications from the shopping cart.
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. _ in1 ();
})()


Tips: The display page here is only a demo. You can customize it as needed.
HTML:

The Code is as follows:







Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.