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"> $ ...
随机推荐
- C++IO类&文件输入输出
C++IO类&文件输入输出 istream(输入流)类型,提供输入操作. ostream(输出流)类型,提供输出操作. cin,一个istream对象,从标准输入读取数据. cout,一个os ...
- iOS ipa包瘦身------删除无用图片资源
随着客户端业务的增多和业务的更新,App包大小越来越大,优化包大小是迫在眉睫,客户端需要优化的地方也有很多,本期主要讲如何查找无用图片并且删除无用图片的方法. 方案1:(暴力方法) ...
- [我所理解的REST] 3.基于网络应用的架构
上篇中解释到什么是架构风格和应该以怎样的视角来理解REST(Web的架构风格).本篇来介绍一组自洽的术语,用它来描述和解释软件架构:以及列举下对于基于网络的应用来说,哪些点是需要我们重点关注的. 1 ...
- 学号：201521123116 《java程序设计》第四周学习总结
1. 本周学习总结 2. 书面作业 Q1. 注释的应用使用类的注释与方法的注释为前面编写的类与方法进行注释,并在Eclipse中查看.(截图)答:注释的插入:注释以/开始,以/结束类注释/**.... ...
- JAVA课程设计-计算器（201521123028 李家俊）
1.团队课程设计博客链接 http://www.cnblogs.com/DevilRay/p/7064482.html 2.个人负责模板或任务说明 主要负责计算器图形界面 包括操作按钮,菜单项以及输出 ...
- JavaScript自动化构建工具入门----grunt、gulp、webpack
蛮荒时代的程序员: 做项目的时候,会有大量的js 大量的css 需要合并压缩,大量时间需要用到合并压缩 在前端开发中会出现很多重复性无意义的劳动 自动化时代的程序员: 希望一切都可以自动完成 ...
- 一篇搞定Python正则表达式
1. 正则表达式语法 1.1 字符与字符类 1 特殊字符:\.^$?+*{}[]()| 以上特殊字符要想使用字面值,必须使用\进行转义 2 字符类 1. 包含在[]中的一个或者多个字符被称为字符 ...
- Failed to start component [StandardEngine[Catalina].StandardHost[localhost].StandardContext[/SpringStruts]]
今天启动Tomcat时候遇到了这个问题 Failed to start component [StandardEngine[Catalina].StandardHost[localhost].Stan ...
- String的内存模型，为什么String被设计成不可变的
String是Java中最常用的类,是不可变的(Immutable), 那么String是如何实现Immutable呢,String为什么要设计成不可变呢? 前言 关于String,收集一波基础,来源 ...
- 翻译连载 | 第 9 章：递归（上）－《JavaScript轻量级函数式编程》 |《你不知道的JS》姊妹篇
原文地址:Functional-Light-JS 原文作者:Kyle Simpson-<You-Dont-Know-JS>作者 关于译者:这是一个流淌着沪江血液的纯粹工程:认真,是 HTM ...