jquery json ajax 二级联动菜单实例_H5之家 - 中国HTML5教程资源分享第一站

本文章向码农们介绍jquery结合json和ajax实现的二级联动菜单实例，对初学json和ajax的码农来说是一个不错的案例，请看下面实例。

注：本网站为码农们提供的大量编程教程：java教程，java实例，php教程，mysql教程，css教程，html教程，，oracle教程等等，如有兴趣，大家可以学习。

本文实例讲述了jquery json ajax 二级联动菜单。分享给码农们参考，具体如下：

后台Handler.ashx

<%@ WebHandler Language="C#" %> 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; } } }

前台dropdownlist.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>dropdownlit </title> <meta 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> </head> <body> <select onchange="GetCity(this.value)"> </select> <select> </select> </body> </html>

jquery json ajax 二级联动菜单实例，需要的码农拿去参考。

原文地址：