本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考，具体如下：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"/> <title></title> <script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script> <link href="./demo.css" rel="stylesheet"/> <link href="../css/order.css" rel="stylesheet"/> <script type="text/javascript" src="../js/cookie.js" ></script> <script type="text/javascript" src="../js/jsorder.1.1.js" ></script> </head> <body> <h1>JSORDER 案例</h1> <table><tr><td colspan="3" align="left">案例一：我的菜单（点击菜名即可加入菜单）</td></tr><tr> <td id="80001" productid="80001" price="12" jsordername="红烧豆腐">红烧豆腐 12元</td> <td id="80002" productid="80002" price="32" jsordername="毛血旺">毛血旺 32元</td> <td id="80003" productid="80003" price="18" jsordername="套餐:京酱肉丝+2米饭 18元">套餐:京酱肉丝+2米饭 18元</td></tr></table> <div id="result"></div> </body> </html> <script type="text/javascript"> //jsorder配置 $.fn.jsorder.defaults = { staticname: 'jsorder', jsorderclass: 'jsorder', savecookie: true, cookiename: 'jsorder', numpre: 'no_', jsorderpre: 'jsorder_', jsorderspanpre: 'jsorderspan_', pricefiled: 'price', namefiled: 'jsordername', leftdemo: '我的菜单', subbuttom: '', //addbuttom : 'a.jsorderadd', addbuttom: 'td.jsorderadd', nomessage: '你今天的食谱是还空的', dosubmit: function (data) { alert(JSON.stringify(data)); //$("#result").html("json内容：" + JSON.stringify(data)).css('background', '#e0e0e0'); jsonAjax("ShoppingCar.ashx", JSON.stringify(data), "text", getsuccess); } }; $("body").jsorder(); function jsonAjax(url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, success: callback, error: function () { jQuery.fn.mBox({ message: '恢复失败' }); } }); }; function getsuccess(o) { //alert(o); //成功后操作 } </script>
<%@ WebHandler Language="C#" %> using System; using System.Web; using System.Data; using System.Web.Script.Serialization; using System.Collections.Generic; using System.Collections; using System.IO; public class ShoppingCar : IHttpHandler { public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; StreamReader reader = new StreamReader(context.Request.InputStream); string jsonString = HttpUtility.UrlDecode(reader.ReadToEnd()); if (MSCL.Until.IsNullOrDBNull(jsonString)) { context.Response.Write("error"); } else { jsonString = "{"goods": [" + jsonString + "]}"; DataSet ds = JsonToDataSet(jsonString); //获取的购物车商品列表 context.Response.Write("ok"); } context.Response.End(); } #region 解析Json成DataTable /// <summary> /// 解析Json成DataTable /// </summary> /// <param name="Json">Json字符串</param> /// <returns></returns> public static DataSet JsonToDataSet(string Json) { try { DataSet ds = new DataSet(); DataTable dt = new DataTable("shoppingcar"); JavaScriptSerializer JSS = new JavaScriptSerializer(); object obj = JSS.DeserializeObject(Json); Dictionary<string, object> datajson = (Dictionary<string, object>)obj; foreach (var item in datajson) { object[] rows = (object[])item.Value; foreach (var row in rows) { Dictionary<string, object> valneed = (Dictionary<string, object>)row; foreach (var needrow in valneed.Values) { #region Dictionary<string, object> val = (Dictionary<string, object>)needrow; DataRow dr = dt.NewRow(); foreach (KeyValuePair<string, object> sss in val) { if (!dt.Columns.Contains(sss.Key)) { dt.Columns.Add(sss.Key.ToString()); dr[sss.Key] = sss.Value; } else dr[sss.Key] = sss.Value; } dt.Rows.Add(dr); #endregion } } } ds.Tables.Add(dt); return ds; } catch { return null; } } #endregion public bool IsReusable { get { return false; } } }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>读取本地购物车Cookie</title> <script type="text/javascript" src="../js/jquery-1.9.1.min.js" ></script> <link href="./demo.css" rel="stylesheet"/> <link href="../css/order.css" rel="stylesheet"/> <script type="text/javascript" src="../js/cookie.js" ></script> <script type="text/javascript" src="../js/jsorder.1.1.js" ></script> <script type="text/javascript"> //初始化配置 var staticname = 'jsorder'; var jsorderpre = 'jsorder_'; var html = ""; $(function () { if ($.cookie(staticname) != null && $.cookie(staticname) != '{}') { $("#list").html(""); initdata = eval('(' + $.cookie(staticname) + ')'); //序列化成数组 $("body").data(staticname, initdata); //alert(JSON.stringify(initdata)); $.each(initdata, function (index, item) { //循环获取数据 var Id = initdata[index]["productid"]; var Name = initdata[index]["name"]; var Price = initdata[index]["price"]; var Count = initdata[index]["count"]; var innerhtml = "<li id='" + jsorderpre + Id + "'>"; innerhtml += Id + "--" + Name + "--" + Price + " "; innerhtml += "<a href='javascript:void(0)' onclick='subnum(" + Id + ")'> - </a><span id='count" + Id + "' >" + Count; innerhtml += "</span><a href='javascript:void(0)' onclick='addnum(" + Id + ")'> + </a>"; innerhtml += "</li>" html += innerhtml; }); $("#list").append(html); } }); function subnum(id) { var datejsorder = $("body").data(staticname); datejsorder[id]['count'] -= 1; if (datejsorder[id]['count'] > 0) { $("#count" + id).html(datejsorder[id]['count']); } else { $("#" + jsorderpre + id).remove(); delete datejsorder[id]; //del json keyValue } savecookie(datejsorder); } function addnum(id, count) { var datejsorder = $("body").data(staticname); datejsorder[id]['count'] += 1; $("#count" + id).html(datejsorder[id]['count']); savecookie(datejsorder); } function savecookie(data) { var date = new Date(); date.setTime(date.getTime() + (1 * 24 * 60 * 60 * 1000)); $.cookie(staticname, JSON.stringify(data), { path: '/', expires: date }); } function dosubmit() { var datejsorder = $("body").data(staticname); alert(JSON.stringify(datejsorder)); //$("#result").html("json内容：" + JSON.stringify(data)).css('background', '#e0e0e0'); jsonAjax("ShoppingCar.ashx", JSON.stringify(datejsorder), "text", getsuccess); } function getsuccess(o) { //alert(o); //成功后操作 } function jsonAjax(url, param, datat, callback) { $.ajax({ type: "post", url: url, data: param, dataType: datat, success: callback, error: function () { jQuery.fn.mBox({ message: '恢复失败' }); } }); }; </script> </head> <body> <div> <ul id="list"> <li>购物车里暂无商品</li> </ul> <input type="button" value="确定,下一步" /> </div> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。