jQuery+JSON实现AJAX二级联动实例分析
2015-12-18 00:00
991 查看
本文实例讲述了jQuery+JSON实现AJAX二级联动的方法。分享给大家供大家参考,具体如下:
后台Handler.ashx
前台dropdownlist.html
希望本文所述对大家jQuery程序设计有所帮助。
Jquery中巧用Ajax的beforeSend方法
实例详解jQuery Mockjax 插件模拟 Ajax 请求
PHP结合Jquery和ajax实现瀑布流特效
简述jQuery ajax的执行顺序
jquery中ajax处理跨域的三大方式
jQuery+Ajax实现无刷新操作
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
jQuery+ajax实现文章点赞功能的方法
JQuery中Ajax()的data参数类型实例分析
jQuery使用$.ajax提交表单完整实例
jQuery 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 validate插件实现ajax验证重复的2种方法Jquery中巧用Ajax的beforeSend方法
实例详解jQuery Mockjax 插件模拟 Ajax 请求
PHP结合Jquery和ajax实现瀑布流特效
简述jQuery ajax的执行顺序
jquery中ajax处理跨域的三大方式
jQuery+Ajax实现无刷新操作
php+jQuery+Ajax实现点赞效果的方法(附源码下载)
jQuery+ajax实现文章点赞功能的方法
JQuery中Ajax()的data参数类型实例分析
jQuery使用$.ajax提交表单完整实例
jQuery ajax时间差导致的变量赋值问题分析
相关文章推荐
- jQuery中trigger()与bind()用法分析
- jQuery打字效果实现方法(附demo源码下载)
- jQuery对html元素的取值与赋值实例详解
- jquery判断复选框选中状态以及区分attr和prop
- jquery实现二级导航下拉菜单效果
- jQuery Validate插件实现表单强大的验证功能
- angular 之 bindJQuery
- jQuery源码学习扒一扒jQuery对象初使化
- JQuery(三)
- JQuery(二)
- jQuery笔记
- jQueryMobile--栅格布局
- jQueryMobile--基础
- JQuery(一)
- jQuery Ajax 实例 全解析(转)
- jQuery学习之jQuery Ajax用法详解(转)
- jquery checkbox (选中和取消选中事件on("change"))做笔记
- 20151217jqueryUI--自动补全工具
- 使用jquery.qrcode生成二维码
- 20151217jqueryUI学习笔记