深入浅出AJAX （一） 经典实例
省市下拉列表级联菜单实现
$(function (){ //注册下拉列表框的改变事件 $('#dropProvince').change(function (){ //1.获取浏览器(下拉列表选择项)的ID值 var proID = $(this).val(); //服务器地址 var url = "../Hander/test.ashx?proID=" + proID //2.通过JQuery的get()方法，向服务器提交数据 $.get(url, function (data) { //3、4.处理服务器返回的数据并加载到界面上 var dtJSON = eval(data); //清空上次改变添加的数据，避免累加 $('#dropCity').html(""); $("<option value=''>" + "请选择城市" + "</option>").appendTo($('#dropCity')); for (var i = 0; i < dtJSON.length; i++) { //创建新的选择项，并添加到下拉列表中 $("<option value=" + dtJSON[i].cityName + ">" + dtJSON[i].cityName + "</option>").appendTo($('#dropCity')); } }) });});服务器端代码，并把数据转换成JSON格式 public void ProcessRequest(HttpContext context) { context.Response.ContentType = "text/plain"; //接受客户端请求的参数 string proID = context.Request.QueryString["proID"]; //实例化操作类 VoteManager voteManager = new VoteManager(); DataTable dt = new DataTable(); //执行方法 dt = voteManager.SelectCityByProvince(proID); //将数据转换为JSON格式 string strJson = DataTableToJson("Json", dt); context.Response.Write(strJson); context.Response.End(); } //将DataTable数据转换成JSON数据格式 public string DataTableToJson(string jsonName, DataTable dt) { StringBuilder Json = new StringBuilder(); Json.Append("["); if (dt.Rows.Count > 0) { for (int i = 0; i < dt.Rows.Count; i++) { Json.Append("{"); for (int j = 0; j < dt.Columns.Count; j++) { Json.Append(dt.Columns[j].ColumnName.ToString() + ":\"" + dt.Rows[i][j].ToString() + "\""); if (j < dt.Columns.Count - 1) { Json.Append(","); } } Json.Append("}"); if (i < dt.Rows.Count - 1) { Json.Append(","); } } } Json.Append("]"); return Json.ToString(); }