09.net网站开发（前端）：6.类淘宝组合搜索效果jQuery+Ajax

yanfaguanli

浏览: 657746 次

最近访客更多访客>>

u012363178

mqc1989

ssder

lyl_420819

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (1719)

社区版块

存档分类

2014-06 ( 63)
2014-05 ( 65)
2014-04 ( 270)
更多存档...

上一节讲到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();
            }
        }
    }
}

分享到：