這篇文章主要介紹了jQuery購(gòu)物車(chē)插件jsorder用法,結(jié)合實(shí)例形式分析了購(gòu)物車(chē)jsorder插件基于ajax與后臺(tái)交互的相關(guān)技巧,需要的朋友可以參考下
本文實(shí)例講述了jQuery購(gòu)物車(chē)插件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">案例一：我的菜單（點(diǎn)擊菜名即可加入菜單）</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內(nèi)容：" + 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: '恢復(fù)失敗'
});
}
});
};
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); //獲取的購(gòu)物車(chē)商品列表
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>讀取本地購(gòu)物車(chē)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) + ')'); //序列化成數(shù)組
$("body").data(staticname, initdata);
//alert(JSON.stringify(initdata));
$.each(initdata, function (index, item) {
//循環(huán)獲取數(shù)據(jù)
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內(nèi)容：" + 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: '恢復(fù)失敗'
});
}
});
};
</script>
</head>
<body>
<div>
<ul id="list">
<li>購(gòu)物車(chē)?yán)飼簾o(wú)商品</li>
</ul>
<input type="button" value="確定,下一步" onclick="dosubmit();" />
</div>
</body>
</html>
希望本文所述對(duì)大家jQuery程序設(shè)計(jì)有所幫助。
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：