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

<!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购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理的更多相关文章

dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
dom变成jquery对象先获取dom对象然后通过$()转换成jquery对象
用jquery解析JSON数据的方法以及字符串转换成json的3种方法
用jquery解析JSON数据的方法,作为jquery异步请求的传输对象,jquery请求后返回的结果是 json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject ...
前台发送字符串给后台，格式为（a,b,c,d），后台将字符串转换成数组遍历后进而更新CheckId
using Newtonsoft.Json; using System; using System.Collections.Generic; using System.Configuration; u ...
jquery.qrcode.min.js(支持中文转化二维码)
详情请看:http://www.ncloud.hk/%E6%8A%80%E6%9C%AF%E5%88%86%E4%BA%AB/jqueryqrcodeminjs/ 今天还是要讲一下关于二维码的知识,前 ...
使用Jquery.AJAX方法和PHP后台数据交互小结
使用jQuery的AJAX方法和后台PHP进行数据交互,交互采用的数据格式JSON格式. 我主要小小的总结了一下,我使用AJAX方法时候遇到一些小小的问题. 第一:在传递数据的时候,传输地址注意是否正 ...
jquery返回顶部，支持手机
jquery返回顶部,支持手机效果体验:http://hovertree.com/texiao/mobile/6/ 在pc上我们很容易就可以用scrollTop()来实现流程的向上滚动的返回到顶部的 ...
windows7打印时，显示脱机，提示“服务器打印后台处理程序服务没有运行”。
1. 问题 windows7打印时,显示脱机,提示“服务器打印后台处理程序服务没有运行”. 2. 解决方法. 将下面的文字保存为bat文件执行,其中\\192.168.40.110\Lenovo M7 ...
jQuery响应式幻灯片插件jquery.glide.js（支持触摸&轻量级）
找到一款好的幻灯片插件不容易,找到一款功能全并且使用很简单的幻灯片更不容易,今天为大家分享一款全能的幻灯片插件glide.js,也是我现在在使用的一款插件. jquery.glide.js是响应和触摸 ...
.Net中jQuery.ajax()调用asp.net后台方法总结
利用JQuery的$.ajax()调用.Net后台方法有多种方式, 不多说了直接上代码前台代码 <script type="text/javascript"> $ ...

随机推荐

poj3249 拓扑排序+DP
题意:给出一个有向无环图,每个顶点都有一个权值.求一条从入度为0的顶点到出度为0的顶点的一条路径,路径上所有顶点权值和最大. 思路:因为是无环图,则对于每个点经过的路径求其最大权值有,dp[i]=ma ...
Linux — 用户组、权限
Linux 用户组分为:所有者.所在组.其他组所有者:谁创建,谁是所有者.命令:ls -al 所在组:当创建文件或者文件夹时,这个文件或者文件夹所分配到的用户组,这样就会有效地隔离文件. 其他组:和 ...
团队作业7---Alpha冲刺值事后诸葛
一.设想和目标 1.我们的软件要解决什么问题? 解决教师和助教对实验报告查重的问题,拥有两个用户:1.教师或助教:查看学生实验报告的重复率:4.学生:上传实验报告. 2.是否定义得很清楚?是否对典型用 ...
201521123082《Java程序设计》第3周学习总结
201521123082<Java程序设计>第3周学习总结标签(空格分隔): Java 1.本周学习总结 XMind图: 2.书面作业 Q1.代码阅读 public class Test ...
团队作业4——第一次项目冲刺（ALpha版本）第三天
一.Daily Scrum Meeting照片二.燃尽图三.项目进展 1.界面完成了前端的HTML页面设计 2.功能完成了后端数据处理的全部基本功能: 数据结构设计及数据交互操作博客页面数据 ...
201521123011 《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结 public ...
201521123040《Java程序设计》第8周学习总结
1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结集合与泛型相关内容. 2. 书面作业本次作业题集集合 1.List中指定元素的删除(题目4-1) 1.1 实验总结我们每次删除元 ...
201521123100 《Java程序设计》第7周学习总结
1. 本周学习总结以你喜欢的方式(思维导图或其他)归纳总结集合相关内容. 参考资料: XMind 2. 书面作业 1.ArrayList代码分析 1.1 解释ArrayList的contains源代 ...
201521123013 《Java程序设计》第4周学习总结
1. 本章学习总结 1.1 尝试使用思维导图总结有关继承的知识点. 1.2 使用常规方法总结其他上课内容. 1.多态是面向对象的三大特性之一.多态的意思:相同的形态,可以实不同的行为.Java中实现多 ...
Python的变量参数

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

Jquery购物车jsorder改进版,支持后台处理程序直接转换成DataTable处理的更多相关文章

随机推荐

热门专题