信鸽网

jQuery+JSON实现AJAX二级联动实例分析

  作者：bea

本文实例讲述了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

本文实例讲述了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");

     $(""+ 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 id="dl1" onchange="GetCity(this.value)">

 </select>

 <select id="dl2">

 </select>

</body>

</html>


希望本文所述对大家jQuery程序设计有所帮助。




有用  |  无用

猜你喜欢

您可能感兴趣的文章: