jQuery+JSON实现AJAX二级联动

后台Handler.ashx

<%@ WebHandler Language="C#" Class="Handler" %>

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 
         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
         "
         );
 $(
         "
         <option value='
         "
         +
          n.A_Num1 
         +
         "
         '>
         "
         +
          n.A_Name 
         +
         "
         </option>
         "
         ).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){
 $(
         "
         <option value=
         "
         +
          n.A_Num1 
         +
         "
         >
         "
         +
          n.A_Name 
         +
         "
         </option>
         "
         ).appendTo(city);
 });
 }
 });
 }
 
         </
         script
         >
         

         </
         head
         >
         

         <
         body
         >
         
 
         <
         select 
         id
         ="dl1"
          onchange
         ="GetCity(this.value)"
         >
         
 
         </
         select
         >
         
 
         <
         select 
         id
         ="dl2"
         >
         
 
         </
         select
         >
         

         </
         body
         >
         

         </
         html
         >