首页 > 开发 > AJAX > 正文

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

2024-09-01 08:33:38
字体:
来源:转载
供稿:网友
这篇文章主要介绍了jQuery+JSON实现AJAX二级联动的方法,以实例形式分析了前台jQuery结合ajax传递json格式数据及后台数据处理技巧,具有一定参考借鉴价值,需要的朋友可以参考下
 

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



注:相关教程知识阅读请移步到JavaScript/Ajax教程频道。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表