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

2019-11-20 10:58:57

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery中trigger()与bind()用法分析

下一篇：js获取url传值的方法