jQuery+JSON实现AJAX二级联动实例分析
更新时间:2015年12月18日 15:25:57 作者:匆匆夏日
这篇文章主要介绍了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程序设计有所帮助。
相关文章
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
今天将登录功能彻底完成,加入记住密码自动登录功能,密码在客户端进行第一次加密存储。并修改了一些bug,优化js代码,上一版本太乱了。2011-07-07jQuery源码分析之jQuery.fn.each与jQuery.each用法
这篇文章主要介绍了jQuery源码分析之jQuery.fn.each与jQuery.each用法,较为详细的分析了each的用法,非常具有实用价值,需要的朋友可以参考下2015-01-01jQuery中$this和$(this)的区别介绍(一看就懂)
这篇文章主要介绍了jQuery中$this和$(this)的区别介绍(一看就懂),本文用简洁的语言讲解了它们之间的区别,并给出了一个例子来说明,需要的朋友可以参考下2015-07-07
最新评论