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

发布于 2017-02-27 22:03:56 | 111 次阅读 | 评论: 0 | 来源: 网友投递

jQuery javascript框架

jQuery是一个兼容多浏览器的javascript框架，核心理念是write less,do more(写得更少,做得更多)。jQuery在2006年1月由美国人John Resig在纽约的barcamp发布，吸引了来自世界各地的众多JavaScript高手加入，由Dave Methvin率领团队进行开发。

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

本文实例讲述了jQuery购物车插件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">案例一：我的菜单（点击菜名即可加入菜单）</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程序设计有所帮助。

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

jQuery javascript框架

后端技术

前端技术

数据库

热门框架

常用IDE

其他