jQuery+JSON实现AJAX二级联动实例分析
本文实例讲述了jQuery+JSON实现AJAX二级联动的方法。分享给大家供大家参考,具体如下:
后台Handler.ashx
<%@WebHandlerLanguage="C#"Class="Handler"%> usingSystem; usingSystem.Web; usingSystem.Data; publicclassHandler:IHttpHandler { CommoncoObj=newCommon(); publicvoidProcessRequest(HttpContextcontext) { if(context.Request.Params["n"]!=null) { stringnum=context.Request.Params["n"].ToString(); context.Response.ContentType="text/plain"; stringstr="select*fromaddresswherea_num2="+num; DataTabledt=coObj.GetTable(str); stringjson=JSONHelper.DataTableToJSON(dt); context.Response.Write(json); } } publicboolIsReusable { get { returnfalse; } } }
前台dropdownlist.html
<!DOCTYPEHTMLPUBLIC"-//W3C//DTDHTML4.01Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>dropdownlit</title> <metaname="Generator"content="EditPlus"/> <scripttype="text/javascript"src="js/jquery-1.5.2.js"></script> <scripttype="text/javascript"> $(function(){ InitData(0); }); functionInitData(n) { $.ajax({ type:"POST", dataType:"json", url:"Handler.ashx", data:{"n":n}, success:function(json){ $.each(json,function(i,n){ varpro=$("#dl1"); $(""+n.A_Name+"").appendTo(pro); }); } }); } functionGetCity(n) { varcity=$("#dl2"); city.html(""); $.ajax({ type:"POST", dataType:"json", url:"Handler.ashx", data:{"n":n}, success:function(json){ $.each(json,function(i,n){ $(""+n.A_Num1+">"+n.A_Name+"").appendTo(city); }); } }); } </script> </head> <body> <selectid="dl1"onchange="GetCity(this.value)"> </select> <selectid="dl2"> </select> </body> </html>
希望本文所述对大家jQuery程序设计有所帮助。