09.net网站开发（前端）：6.类淘宝组合搜索效果jQuery+Ajax
上一节讲到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();
}
}
}
}