Home >Web Front-end >JS Tutorial >jquery json ajax 二级联动菜单实例
本文实例讲述了jquery json ajax 二级联动菜单。分享给码农们参考,具体如下:
后台Handler.ashx
<code class="language-cs"> using System; using System.Web; using System.Data; public class Handler : IHttpHandler { Common coObj = new Common(); public void ProcessRequest(HttpContext context) { if (context.Request.Params["n"] != null) { string num = context.Request.Params["n"].ToString(); context.Response.ContentType = "text/plain"; string str = "select * from address where a_num2=" + num; DataTable dt = coObj.GetTable(str); string json = JSONHelper.DataTableToJSON(dt); context.Response.Write(json); } } public bool IsReusable { get { return false; } } }</code>
前台dropdownlist.html
<code class="language-html"> <title>dropdownlit </title> <meta name="Generator" content="EditPlus"> <script type="text/javascript" src="js/jquery-1.5.2.js"></script> <script type="text/javascript"> $(function(){ InitData(0); }); function InitData(n) { $.ajax({ type:"POST", dataType:"json", url: "Handler.ashx", data:{"n":n}, success:function(json){ $.each(json,function(i,n){ var pro=$("#dl1"); $(""+ n.A_Name +"").appendTo(pro); }); } }); } function GetCity(n) { var city=$("#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> <select id="dl1" onchange="GetCity(this.value)"> </select> <select id="dl2"> </select> </code>
jquery json ajax 二级联动菜单实例,需要的码农拿去参考。