09.net网站开发(前端):6.类淘宝组合搜索效果jQuery+Ajax

32 篇文章 1 订阅
27 篇文章 0 订阅

上一节讲到jQuery,本来还不能这么快就发jQuery+Ajax的,因为这部分对于新手来说,不是很好理解,但为了配合发我的实习经验,就先贴出来了。新手先有个概念就好,Ajax是为了前端能和后台交互的,它们的关系就像:顾客来到某餐厅,服务员就像前台的一个元素,厨房就像后台的一个元素,你想吃什么和服务员说,服务员就让厨房里的人做出对应的佳肴,然后服务员拿着你想要的东西给你。(菜式名,钱等是传入参数,佳肴是返回数据~)

不扯了~我需要实现一种比较复杂的组合搜索效果。类似:

前端会记录所要搜索的关键词,每次新增一个条件,就请求后台一次返回符合要求的数据,同样,没删除一个条件,也会重新返回对应数据。

下面是我做的一个还有很多Bug的Demo,原本我想在后台保存结果数据,用了全局static变量来保存。

后来还是测试不出正确结果,觉得还是将数据在前端保存就好吧,然后每次都让后台根据前端的数据来返回新的数据。

前台:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ajaxJquery.aspx.cs" Inherits="EMS.WEB.Enterprise.ajaxJquery" %>

<!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 runat="server">
    <title></title>
    <script src="js/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var tabIds = new Array();
            //下拉框选项改变时,列表选项判断后添加。Label1(相当图表)更新。
            $("#mySelect").change(function () {
                var selectId = $("#mySelect").val();
                var selectText = $("#mySelect option:selected").text();
                var isSecond = false;
                for (var i = 0; i < tabIds.length; i++) {
                    if (tabIds[i] == selectId) {
                        isSecond = true;
                        return;
                    }
                }
                if (!isSecond) {
                    tabIds.push(selectId);
                    $("#myUi").append("<li " + "id='" + selectId + "'" + ">" + selectText + "</li>");
                    $.ajax({
                        type: "get",
                        url: "ajaxJquery.aspx",
                        data: "id=" + selectId + "&" + "show=1",
                        async: false,
                        contentType: "application/json;charset=utf-8",
                        dataType: "json",
                        success: function (msg) {
                            $("#Label1").text("");
                            $.each(msg, function () {
                                $("#Label1").text($("#Label1").text() + "+" + this.data);
                            });

                        }
                    });
                }

            });
            //点击列表选项时,删除该选项,Label1(相当图表)更新。
            $("#myUi li").live("click", function () {
                var selectId = $(this).attr("id");
                $(this).remove();
                $.ajax({
                    type: "get",
                    url: "ajaxJquery.aspx",
                    dataType: "json",
                    async: false,
                    data: "id=" + selectId + "&" + "show=0",
                    success: function (msg) {
                        $("#Label1").text("");
                        $.each(msg, function () {
                            $("#Label1").text($("#Label1").text() + "+" + this.data);
                            for (var i = 0; i < tabIds.length; i++) {
                                if (tabIds[i] == selectId) {
                                    tabIds.splice(i, 1);
                                    return;
                                }
                            }
                        });
                    }
                })
            })

        });
    </script>
    <style type="text/css">
        #myUi li
        {
            background-color: Aqua;
            margin-left: 4px;
            float: left;
            width: 70px;
            list-style: none;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <select id="mySelect" runat="server">
        </select>
    </div>
    <div id="myTab">
        <ul id="myUi">
        </ul>
    </div>
    <div style="clear: left;">
    </div>
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    <div id="ddiv" runat="server">
    </div>
    </form>
</body>
</html>

 

后台:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.Services;
using System.Web.Script.Serialization;
using System.Text;

namespace EMS.WEB.Enterprise
{
    [Serializable]//序列话后才能用系统类转换为json
    public class Data
    {
        public int index;
        public string data;
        public Data(int i, string d)
        {
            index = i;
            data = d;
        }
    }
    public partial class ajaxJquery : System.Web.UI.Page
    {


        static List<Data> data= new List<Data>();//用来装 选择过的选项 的索引号及数据
        public List<Data> ShowData(int id)
        {
            data.Add(new Data(id, "图:" + id));
            return data;
        }

        public List<Data> RemoveData(int id)
        {
            for (int i = 0; i < data.Count; i++)
            {
                if (data[i].index == id)
                {
                    data.Remove(data[i]);
                    break;
                }
            }
            return data;
        }

        protected void Page_Load(object sender, EventArgs e)
        {

            if (!IsPostBack && Request.Params["id"] == null)
            {
                #region 初始化数据
                for (int i = 0; i < s.Length; i++)
                {
                    mySelect.Items.Add(new ListItem(s[i], i.ToString()));
                }
                #endregion
                return;
            }
            if (Request.Params["id"] != null)
            {
                int id = int.Parse(Request.Params["id"]);
                JavaScriptSerializer json = new JavaScriptSerializer();
                if (Request.Params["show"] == "1")
                {

                    ShowData(id);

                }
                else if (Request.Params["show"] == "0")
                {
                    RemoveData(id);
                }
                Response.Write(json.Serialize(data));
                Response.End();
            }
        }
    }
}


 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值