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下用eval生成JSON对象
Sep 17 Javascript
js对象之JS入门之Array对象操作小结
Jan 09 Javascript
PHP+mysql+Highcharts生成饼状图
May 04 Javascript
浅谈JavaScript中的作用域和闭包问题
Jul 07 Javascript
XML文件转化成NSData对象的方法
Aug 12 Javascript
js 判断所选时间(或者当前时间)是否在某一时间段的实现代码
Sep 05 Javascript
jQuery实现页面点击后退弹出提示框的方法
Aug 24 Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue遍历对象中的数组取值示例
Nov 07 Javascript
vue项目中使用bpmn为节点添加颜色的方法
Apr 30 Javascript
Node.js API详解之 repl模块用法实例分析
May 25 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
php求斐波那契数的两种实现方式【递归与递推】
2019/09/09 PHP
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
js跨域问题之跨域iframe自适应大小实现代码
2010/07/17 Javascript
js下通过prototype扩展实现indexOf的代码
2010/12/08 Javascript
JQuery判断HTML元素是否存在的两种解决方法
2013/12/26 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
js选择并转移导航菜单示例代码
2014/08/19 Javascript
js/jquery判断浏览器类型的方法小结
2015/05/12 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
jquery实现经典的淡入淡出选项卡效果代码
2015/09/22 Javascript
js实现跨域的4种实用方法原理分析
2015/10/29 Javascript
jQuery mobile类库使用时加载导航历史的方法简介
2015/12/04 Javascript
Bootstrap CSS组件之按钮下拉菜单
2016/12/17 Javascript
JS动态遍历json中所有键值对的方法(不知道属性名的情况)
2016/12/28 Javascript
jQuery选择器实例应用
2017/01/05 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
浅析node应用的timing-attack安全漏洞
2018/02/28 Javascript
vue 2.x 中axios 封装的get 和post方法
2018/02/28 Javascript
使用json-server简单完成CRUD模拟后台数据的方法
2018/07/12 Javascript
5分钟快速掌握JS中var、let和const的异同
2018/09/19 Javascript
Angular8 实现table表格表头固定效果
2020/01/03 Javascript
解决vue动态下拉菜单 有数据未反应的问题
2020/08/06 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python获取Linux下文件版本信息、公司名和产品名的方法
2014/10/05 Python
Pandas中把dataframe转成array的方法
2018/04/13 Python
使用python绘制二元函数图像的实例
2019/02/12 Python
Python 学习教程之networkx
2019/04/15 Python
python 中pyqt5 树节点点击实现多窗口切换问题
2019/07/04 Python
Python+Selenium+phantomjs实现网页模拟登录和截图功能(windows环境)
2019/12/11 Python
德国最大的婴儿用品网上商店:Kidsroom.de(支持中文)
2020/09/02 全球购物
护士试用期自我鉴定
2014/02/08 职场文书
进步之星获奖感言
2014/02/22 职场文书
秋季运动会广播稿
2014/02/22 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
HTML静态页面获取url参数和UserAgent的实现
2022/08/05 HTML / CSS