本文實例講述了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 class="jsorderadd" id="80001" productid="80001" price="12" jsordername="紅燒豆腐">紅燒豆腐 12元</td> <td class="jsorderadd" id="80002" productid="80002" price="32" jsordername="毛血旺">毛血旺 32元</td> <td class="jsorderadd" 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#" Class="ShoppingCar" %>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)' style='text-decoration:none;' onclick='subnum(" + Id + ")'> - </a><span id='count" + Id + "' >" + Count; innerhtml += "</span><a href='javascript:void(0)' style='text-decoration:none;' 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="確定,下一步" onclick="dosubmit();" /></div></body></html>更多關于jQuery相關內容感興趣的讀者可查看本站專題：《jquery中Ajax用法總結》、《jQuery表格(table)操作技巧匯總》、《jQuery拖拽特效與技巧總結》、《jQuery擴展技巧總結》、《jQuery常見經典特效匯總》、《jQuery動畫與特效用法總結》、《jquery選擇器用法總結》及《jQuery常用插件及用法總結》
希望本文所述對大家jQuery程序設計有所幫助。
新聞熱點
疑難解答
