jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

当前位置：首页 > 范文|应用文 > IT技术专栏 > 网络编程

来源：阅读：1112 次日期：2016-06-18 13:51:46

温馨提示：小编为您整理了“jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)”,方便广大网友查阅！

这篇文章主要介绍了jQuery购物车插件jsorder用法,结合实例形式分析了购物车jsorder插件基于ajax与后台交互的相关技巧,需要的朋友可以参考下

本文实例讲述了jQuery购物车插件jsorder用法。分享给大家供大家参考，具体如下：

代码如下:

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<h1>JSORDER 案例</h1>

<table><tr><td colspan="3" align="left">案例一：我的菜单（点击菜名即可加入菜单）</td></tr><tr>

</body>

</html>

//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">

<head>

<title>读取本地购物车Cookie</title>

//初始化配置

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>

<li>购物车里暂无商品</li>

</ul>

</div>

</body>

</html>

希望本文所述对大家jQuery程序设计有所帮助。

上一篇：Javascript之String对象详解

下一篇：浅谈JavaScript函数的四种存在形态

手机网站地址：jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)

由于各方面情况的不断调整与变化，提供的所有考试信息和咨询回复仅供参考，敬请考生以权威部门公布的正式信息和咨询为准！