前端JS代码: // JavaScript Document var XmlHttpHelper = { getXmlHttp:function()//获取ajax对象 { var xmlHttp = null; if (window.ActiveXObject) { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); if (!xmlHttp) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") } } else if (window.XMLHttpRequest) { xmlHttp = new XMLHttpRequest(); } return xmlHttp; }, //异步 asynCall:function(url,callback) { var xmlhttp = XmlHttpHelper.getXmlHttp(); xmlhttp.open("GET", url, true); xmlhttp.send(null); xmlhttp.onreadystatechange = function() { if (xmlhttp.readyState == 4 && xmlhttp.status >= 200 && xmlhttp.status < 300) { if(callback) { callback(xmlhttp.responseText); } } } }, //同步 synCall:function(url,callback) { var xmlhttp = XmlHttpHelper.getXmlHttp(); xmlhttp.open("GET", url, false); xmlhttp.send(null); if(callback) { callback(xmlhttp.responseText); }else return xmlhttp.responseText; } } //ajax方法 function doAjaxCall(funname,param1,param2) { var params = ""; var i=0; for(i=1;i<arguments.length;i++) { params += "¶m=" + arguments[i]; } return XmlHttpHelper.synCall("CallTools.aspx?funname="+funname+params) } //调用ajax方法,绑定数据到控件 function BindTabletoListControl(funname,selectId,dbTableName,dbColumns,wheresql,orderby,defaultValue){ var selectControl = document.getElementById(selectId); if(funname=="undefined"||funname==null)funname="BindTabletoListControl";//后台方法名称 if(dbTableName=="undefined"||dbTableName==null)dbTableName="v_city";//数据库表名 if(dbColumns=="undefined"||dbColumns==null)dbColumns="";//查询的列名 if(wheresql=="undefined"||wheresql==null)wheresql="";//查询条件 if(orderby=="undefined"||orderby==null)orderby="";//排序 if(defaultValue=="undefined"||defaultValue==null)defaultValue="";//默认值 var result=doAjaxCall(funname,dbTableName,dbColumns,wheresql,orderby);//调用ajax方法,获取返回值 doBindReturnValueToSelectControl(selectControl,result,defaultValue);//返回值绑定到页面中的select对象中 return true; } //数据绑定 function doBindReturnValueToSelectControl(objSelect,result,defaultValue) { if(result == null || result == "") return true; var json = result.parseJSON(); for (key in json) { if (!json.hasOwnProperty(key)) continue; var value = json[key]; var option = document.createElement("OPTION"); option.value = key; option.text = value; if(defaultValue == key) option.selected = true; objSelect.options.add(option); } } //select的onchange事件所触发的方法 function selectOnChangeFun(obj1_id,obj2_id,obj3_id){ var lev1,lev2,lev3,lev_value; if(obj1_id!="undefined" || obj1_id!=null)//一级 { lev1=document.getElementById(obj1_id); lev2=document.getElementById(obj2_id); lev_value=lev1.value; if(lev_value.length==0 || lev_value=="undefined") { //二级清除全部 while(lev2.options.length>1) { lev2.options.remove(1); } }else { BindTabletoListControl(null,obj2_id,"v_city","code,name","parentId='"+lev_value+"'",null,null); var option = document.createElement("OPTION"); option.value = ""; option.text = ""; lev2.options.add(option,0); lev2.options[0].selected="selected"; } } else//二级 { lev2=document.getElementById(obj2_id); lev3=document.getElementById(obj3_id); lev_value=lev2.value; if(lev1_v.length==0 || lev_value=="undefined") { //三级清除全部 while(lev3.options.length>1) { lev3.options.remove(1); } }else { BindTabletoListControl(null,obj3_id,"v_city","code,name","parentId='"+lev_value+"'",null,null); var option = document.createElement("OPTION"); option.value = ""; option.text = ""; lev3.options.add(option,0); lev3.options[0].selected="selected"; } } } 前端HTML代码: <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>gaj的ajax实例</title> </head> <mce:script type="text/javascript" src="ajax.js" mce_src="ajax.js"></mce:script> <body> 分公司:<select id="lev1" οnchange="selectOnChangeFun('lev1','lev2')"> <option value="" selected="selected"> </option> <option value="山东">山东</option> </select> 中心支:<select id="lev2" οnchange="selectOnChangeFun(null,'lev2','lev3')"> <option value="" selected="selected"> </option> <option value="聊城">聊城直属分公司</option> </select> 营业区:<select id="lev3"> <option value="" selected="selected"> </option> <option value="东城区">东昌府营业区</option> </select> </body> </html> 后台ASP.NET代码: <%@ Page Language="C#" ContentType="text/html" ResponseEncoding="utf-8" %> <!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> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CallServer</title> </head> <mce:script runat="server"><!-- protected void Page_Load(object sender, EventArgs e) { try { string funName = Request.QueryString["funname"]; string[] allParams = Request.QueryString.GetValues("param"); string result = Process(funName, allParams); Response.Clear(); Response.Expires = 0; Response.Write(result); } catch { Response.Clear(); Response.Write(""); } } //开始后台处理 protected string Process(string funname,string[] allParams) { switch(funname) { case "BindTabletoListControl": return BindTabletoListControl(allParams); default: return ""; } } //邦定表到列表控件 protected string BindTabletoListControl(string[] allParams) { string dbTableName = "",dbColumns = "", wheresql = "", orderby = ""; if (allParams.Length > 2) dbTableName = allParams[2]; if (allParams.Length > 3) dbColumns = allParams[3]; if (allParams.Length > 4) wheresql = allParams[4]; if (allParams.Length > 5) orderby = allParams[5]; DataTable dt =DBHelper.QueryTableCodes(dbTableName,dbColumns,wheresql,orderby); Hashtable ht = new Hashtable(); if (table == null) return ht; //把Data Table转换成字典 for (int i = 0; i < table.Rows.Count; i++) { ht.Add(table.Rows[i][keyField], table.Rows[i][valueField]); } return ObjectToString(ht); } //对象转换成json文本,必须添加相应程序集引用 protected string ObjectToString(object o) { JsonSerializer js = new JsonSerializer(); TextWriter writer = new StringWriter(); js.Serialize(writer, o); return writer.ToString(); } // --></mce:script> <body> </body> </html>