上一节讲到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]//序列话后才能用系统类转换为jsonpublic 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()));}#endregionreturn;}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();}}}
}
