网站首页  汉语字词  英语词汇  考试资料  写作素材  旧版资料

请输入您要查询的考试资料：

　

标题 jQuery购物车插件jsorder用法(支持后台处理程序直接转换成DataTable处理)
内容
    这篇文章主要介绍了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">案例一：我的菜单（点击菜名即可加入菜单）</td></tr><tr>
          <td id="80001" productid="80001" price="12" jsordername="红烧豆腐">红烧豆腐 12元</td>
          <td id="80002" productid="80002" price="32" jsordername="毛血旺">毛血旺 32元</td>
          <td 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程序设计有所帮助。
随便看

　

在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。

　

Copyright © 2002-2024 cuapp.net All Rights Reserved
更新时间：2025/5/22 13:18:17