文档章节

Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理

深圳大道
 深圳大道
发布于 2016/12/29 15:39
字数 862
阅读 22
收藏 1
<!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>

本文转载自:http://blog.csdn.net/smartsmile2012/article/details/17187291

深圳大道
粉丝 3
博文 877
码字总数 0
作品 0
深圳
架构师
私信 提问
JSF框架 PrimeFaces 3.0 M2 发布

PrimeFaces是一个用于提高JSF Web应用程序开发效率的开源类库。 3.0M2 主要改进包括(完整内容): Reimplementation of component event callbacks (*Listener, *Update) as ajax behaviors...

红薯
2011/07/08
703
0
jQuery 1.6 正式版发布

jQuery 1.6 正式版发布了,重写了 Attribute 模块和大量的性能改进。 新版本中的部分重要改进: attr()、val()和data()方法有了更好的性能; 在attr()方法中支持Boolean属性; 添加了钩子函数...

红薯
2011/05/03
8.9K
27
7 个顶级的 jQuery 地图插件

jQuery是当前最流行的万维网的JavaScript类库之一,几乎每个网络设计师和网络开发者都熟悉jQuery的功能和特性及术语。你可以在jQuery中找到你所遇到的问题的解决方案,它几乎涵盖了所有的网站...

oschina
2014/02/15
7.4K
0
jQuery的发展史,你知道吗?

每天多学一点知识,就少写一行代码 2006年1月,jQuery的第一个版本面世,至今已经有6年多了(注:这个时间点是截止至出书时间)。虽然过了这么久,但它依然以其简洁、灵活的编程风格让人一见...

生气的散人
2014/01/21
507
0
jQuery 3.0 的更新内容及使用方法

本文是一篇来自微软的 Web 开发系列文章的一部分。感谢您支持这位使 SitePoint 成为可能的合作伙伴。 jQuery,是迄今为止世界上最流行的 JavaScript 库,一直是我们这些 Web 开发者的神器。自...

oschina
2016/01/22
10.2K
23

没有更多内容

加载失败,请刷新页面

加载更多

Feign Retryer的默认重试策略测试

1、Feign配置 @Configurationpublic class FeignConfig { @Value("${coupon_service.url:http://localhost:8081}") private String couponServiceUrl; @Bean publ......

moon888
16分钟前
1
0
关于不同域名下的session共享问题

如果登录,首页,分类,列表,产品都在不同的二级域名下,主域名不变,一定要保证里面的版本问题,不能为了更新而更新,这样哪个下面的session都访问不了。

dragon_tech
17分钟前
1
0
iOS 中文拼音互转(好东西记录一下)

PinYin4Objc

_____1____
25分钟前
1
0
fabric private data实战

Hyperledger Fabric private data是1.2版本引入的新特性,fabric private data是利用旁支数据库(SideDB)来保存若干个通道成员之间的私有数据,从而在通道之上又提供了一层更灵活的数据保护...

汇智网教程
25分钟前
1
0
es之聚合查询汇总

记录一下最近用到的es聚合查询,感觉常见的应该多遇上了,下午抽空更新

我真是小菜鸡
26分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部