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


Posted in Javascript onDecember 18, 2015

本文实例讲述了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 相关文章推荐
jQuery创建平滑的页面滚动(顶部或底部)
Feb 26 Javascript
node.js中的fs.chmod方法使用说明
Dec 18 Javascript
用JavaScript判断CSS浏览器类型前缀的两种方法
Oct 08 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
JS定时器实现数值从0到10来回变化
Dec 09 Javascript
JQueryEasyUI框架下的combobox的取值和绑定的方法
Jan 22 Javascript
Angular开发者指南之入门介绍
Mar 05 Javascript
javascript数据结构中栈的应用之符号平衡问题
Apr 11 Javascript
js 倒计时(高效率服务器时间同步)
Sep 12 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
如何用threejs实现实时多边形折射
May 07 Javascript
js获取url传值的方法
Dec 18 #Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
Dec 18 #Javascript
jquery获取css的color值返回RGB的方法
Dec 18 #Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 #Javascript
jquery简单倒计时实现方法
Dec 18 #Javascript
js命名空间写法示例
Dec 18 #Javascript
JavaScript Split()方法
Dec 18 #Javascript
You might like
基于文本的留言簿
2006/10/09 PHP
php使用PDO方法详解
2014/12/27 PHP
PHP实现浏览器中直接输出图片的方法示例
2018/03/14 PHP
JS 动态加载脚本的4种方法
2009/05/05 Javascript
用JavaScript对JSON进行模式匹配 (Part 2 - 实现)
2010/07/17 Javascript
jQuery实现简单的间隔向上滚动效果
2015/03/09 Javascript
jquery控制显示服务器生成的图片流
2015/08/04 Javascript
jQuery实现监控页面所有ajax请求的方法
2015/12/10 Javascript
js如何改变文章的字体大小
2016/01/08 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
JS简单设置下拉选择框默认值的方法
2016/08/20 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
使用Ajax与服务器(JSON)通信实例
2016/11/04 Javascript
JavaScript实现解析INI文件内容的方法
2016/11/17 Javascript
详解JS模块导入导出
2017/12/20 Javascript
小程序实现层叠卡片滑动效果
2019/08/26 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
2020/03/24 Javascript
vue router返回到指定的路由的场景分析
2020/11/10 Javascript
了不起的11个JavaScript代码重构最佳实践小结
2021/01/11 Javascript
[01:32:22]DOTA2-DPC中国联赛 正赛 Ehome vs VG BO3 第一场 2月5日
2021/03/11 DOTA
python 3.5下xadmin的使用及修复源码bug
2017/05/10 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
用python代码将tiff图片存储到jpg的方法
2018/12/04 Python
对python以16进制打印字节数组的方法详解
2019/01/24 Python
Python玩转加密的技巧【推荐】
2019/05/13 Python
python flask 如何修改默认端口号的方法步骤
2019/07/12 Python
Python3 itchat实现微信定时发送群消息的实例代码
2019/07/12 Python
python add_argument()用法解析
2020/01/29 Python
Python操作注册表详细步骤介绍
2020/02/05 Python
python 绘制场景热力图的示例
2020/09/23 Python
详解CSS3 弹性布局快速入门
2019/06/06 HTML / CSS
size?丹麦官网:英国伦敦的球鞋精品店
2019/04/15 全球购物
村级换届选举方案
2014/05/10 职场文书
2014年银行柜员工作总结
2014/11/12 职场文书
大学班长竞选稿
2015/11/20 职场文书
2019最新公司租房合同(例文)
2019/07/18 职场文书