jquery json ajax 二级联动菜单实例
时间:2016-03-29
本文章向码农们介绍jquery结合json和ajax实现的二级联动菜单实例, 对初学json和ajax的码农来说是一个不错的案例,请看下面实例。
本文实例讲述了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 json ajax 二级联动菜单实例,需要的码农拿去参考。
- android 游戏移植 (一) (文末有福利) | SDL 西游释厄传调试
- 自制分布式漏洞扫描工具
- [细节剖析]X Windows中一个22年的漏洞
- android 游戏移植 (二) | SDL2.0适配 西游释厄传
- Android调用系统相册和拍照的Demo
- 黑客是如何通过RDP远程桌面服务进行攻击的
- SDL的几个宽高概念讲解(文中有福利)
- [安全科普]你必须了解的session的本质
- Android中如何动态的实现设置全屏和退出全屏
- Android 双进程Service常驻后台,无惧“一键清理”
- Android之捕获TextView超链接
- 自封装Android软键盘工具类ImeUtil
- XSS挑战第一期Writeup
- 安全公司新星Aorato推出“行为防火墙”
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- TensorFlow 指定GPU 日志却显示的是第0块
- bazel 出现no such package '@org_tensorflow//tensorflow' 错误
- tensorflow API——tf.random_uniform 使用
- go cannot find package "golang.org/x/crypto/ssh/terminal" 解决方案
- go 中的 defer 使用及其规则
- 数据结构算法操作试题(C++/Python/Go)——938 二叉搜索树的范围和
- Android Studio 代理配置了Gradle依旧连接超时
- Dart 中变量类型 var, Object, dynamic 区别
- C++ 中的static关键字使用场景
- Dart 中的生产模式和检查模式
- 使用mysqladmin工具统计mysql当前的T/QPS
- MixIn 理解
- Day14:链表中倒数第k个结点
- Flutter开发笔记——BottomNavigationBar设置未选择Item颜色
- 访问虚拟机局域网服务拒绝连接