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 相关文章推荐
浅说js变量
May 25 Javascript
jquery中获得元素尺寸和坐标的方法整理
May 18 Javascript
超级好用的jQuery圆角插件 Corner速成
Aug 31 Javascript
使用JS实现jQuery的addClass, removeClass, hasClass函数功能
Oct 31 Javascript
JS返回iframe中frameBorder属性值的方法
Apr 01 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
js实现点击按钮弹出上传文件的窗口
Dec 23 Javascript
jQuery.Form实现Ajax上传文件同时设置headers的方法
Jun 26 jQuery
JavaScript实现图片拖曳效果
Sep 08 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
layui table 获取分页 limit的方法
Sep 20 Javascript
JS+canvas五子棋人机对战实现步骤详解
Jun 04 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
咖啡的植物学知识
2021/03/03 咖啡文化
MySQL相关说明
2007/01/15 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php 数组的合并、拆分、区别取值函数集
2010/02/15 PHP
php中异常处理方法小结
2015/01/09 PHP
PHP+MySQL实现的简单投票系统实例
2016/02/24 PHP
php微信公众平台开发(四)回复功能开发
2016/12/06 PHP
js导出table到excel同时兼容FF和IE示例
2013/09/03 Javascript
jquery防止重复执行动画避免页面混乱
2014/04/22 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
浅谈JavaScript中Date(日期对象),Math对象
2015/02/05 Javascript
jQuery插件jFade实现鼠标经过的图片高亮其它变暗
2015/03/14 Javascript
javascript学习笔记之函数定义
2015/06/25 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
两行代码轻松搞定JavaScript日期验证
2016/08/03 Javascript
使用微信小程序开发前端【快速入门】
2016/12/05 Javascript
基于JavaScript中字符串的match与replace方法(详解)
2017/12/04 Javascript
对vue里函数的调用顺序介绍
2018/03/17 Javascript
微信小程序商品详情页的底部弹出框效果
2020/11/16 Javascript
Bootstrap导航菜单点击后无法自动添加active的处理方法
2018/08/10 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
小程序实现页面顶部选项卡效果
2018/11/06 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
js用正则表达式筛选年月日的实例方法
2021/01/04 Javascript
[44:51]2018DOTA2亚洲邀请赛 4.4 淘汰赛 VP vs Liquid 第二场
2018/04/05 DOTA
Python读取mp3中ID3信息的方法
2015/03/05 Python
python将图片文件转换成base64编码的方法
2015/03/14 Python
Python开发SQLite3数据库相关操作详解【连接,查询,插入,更新,删除,关闭等】
2017/07/27 Python
python实现飞机大战
2018/09/11 Python
无惧面试,带你搞懂python 装饰器
2020/08/17 Python
Jabra捷波朗美国官网:用于办公、车载和运动的无线蓝牙耳麦
2017/02/01 全球购物
Nuts.com:优质散装,批发坚果、干果和巧克力等
2017/03/21 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
餐厅采购员岗位职责
2014/03/06 职场文书
护士求职自荐信
2015/03/25 职场文书
win10怎么设置右下角图标不折叠?Win10设置右下角图标不折叠的方法
2022/07/15 数码科技