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的获取JS文件中的字符串内容
Feb 14 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
js实例属性和原型属性示例详解
Nov 23 Javascript
JavaScript实现将文本框的值插入指定位置的方法
Aug 13 Javascript
基于Jquery实现万圣节快乐特效
Nov 01 Javascript
jquery实现删除一个元素后面的所有元素功能
Dec 21 Javascript
jquery获取点击控件的绝对位置简单实例
Oct 13 Javascript
jquery网页加载进度条的实现
Jun 01 jQuery
JavaScript中click和onclick本质区别与用法分析
Jun 07 Javascript
简述JS控制台的使用
Jul 15 Javascript
原生JS实现逼真的图片3D旋转效果详解
Feb 16 Javascript
如何在JavaScript中等分数组的实现
Dec 13 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中英混合字符串截取函数代码
2011/07/17 PHP
一个典型的PHP分页实例代码分享
2011/07/28 PHP
PHP获取表单所有复选框的值的方法
2014/08/28 PHP
PHP提示Deprecated: mysql_connect(): The mysql extension is deprecated的解决方法
2014/08/28 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
javascript简单实现表格行间隔显示颜色并高亮显示
2013/11/29 Javascript
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
javascript实现youku的视频代码自适应宽度
2015/05/25 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
jQuery简单自定义图片轮播插件及用法示例
2016/11/21 Javascript
微信小程序之滚动视图容器的实现方法
2017/09/26 Javascript
原生js实现拖拽功能基本思路详解
2018/04/18 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
vue自动路由-单页面项目(非build时构建)
2019/04/30 Javascript
[03:56]还原FTP电影首映式 DOTA2群星拼出遗迹世界
2014/03/26 DOTA
使用Python获取Linux系统的各种信息
2014/07/10 Python
python实现下载整个ftp目录的方法
2017/01/17 Python
Python数据结构与算法之列表(链表,linked list)简单实现
2017/10/30 Python
Python实现定时自动关闭的tkinter窗口方法
2019/02/16 Python
用Python实现将一张图片分成9宫格的示例
2019/07/05 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
详解pandas赋值失败问题解决
2020/11/29 Python
Python实现树莓派摄像头持续录像并传送到主机的步骤
2020/11/30 Python
Clarins娇韵诗英国官网:来自法国的天然护肤品牌
2017/04/18 全球购物
中职生自荐信
2013/10/13 职场文书
服装厂厂长职责
2013/12/16 职场文书
给客户的道歉信
2014/01/13 职场文书
《草原的早晨》教学反思
2014/04/08 职场文书
村班子对照检查材料
2014/08/18 职场文书
中秋节慰问信
2015/02/15 职场文书
听证通知书
2015/04/24 职场文书
预备党员表决心的话
2015/09/22 职场文书
《红领巾真好》教学反思
2016/02/16 职场文书
java设计模式--三种工厂模式详解
2021/07/21 Java/Android
php去除数组中为0的元素的实例分析
2021/11/17 PHP