ajax省市联动案例,JQuery+Ajax制作省市联动
$(document).ready(function () {
$("#Province").append("" + "--请选择--" + "");
$("#City").append("" + "--请选择--" + "");
$("#District").append("" + "--请选择--" + "");
$.ajax({
url: "Handler1.ashx?type=0", //路径 地址
type: "get", //类型，post\get
dataType: "json", //json数据
success: function (msg) {//返回结果
for (var i = ; i < msg.length; i++) {
$("#Province").append("" + msg[i].ProvinceName + "");
}
}
});
//市
$("#Province").change(function () {
$("#City").empty(); //清空数据
$("#District").empty(); //清空数据
$("#District").append("" + "--请选择--" + "");
var ProvinceID = $(this).val();
$.ajax({
url: "Handler1.ashx?type=1",
type: "get", //类型
data: {
ProvinceID: ProvinceID
},
dataType: "json", //json数据
success: function (msg) {
for (var i = ; i < msg.length; i++) { $("#City").append("" + msg[i].CityName + ""); }
}
});
});
//区
$("#City").change(function () {
$("#District").empty(); //清空数据
var CityID = $(this).val();
$.ajax({
url: "Handler1.ashx?type=2",
type: "get", //类型
data: {
CityID: CityID
},
dataType: "json", //json数据
success: function (msg) {
for (var i = ; i < msg.length; i++) { $("#District").append("" + msg[i].DistrictName + ""); }
}
});
});
});
结合ajax(一般处理程序)
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Web.Script.Serialization;
namespace GovSystem.Company
{
///
/// Handler1 的摘要说明
///
public class Handler1 : IHttpHandler
{
public string text;
public void ProcessRequest(HttpContext context)
{
int action = Convert.ToInt32(context.Request.QueryString["type"]);
switch (action)
{
case (int)GetType.省:
text = Sel_Province(context);
break;
case (int) GetType.市:
text=Sel_City(context);
break;
case (int)GetType.区:
text = Sel_District(context);
break;
}
context.Response.ContentType = "text/plain";
context.Response.Write(text);
}
//省
private string Sel_Province(HttpContext context)
{
XieKe.BLL.S_Province b_Province = new XieKe.BLL.S_Province();
DataTable dt=b_Province.GetList("").Tables[];
List listInfo = new List();
for (int i = ; i < dt.Rows.Count; i++)
{
XieKe.Model.S_Province m_Province = new XieKe.Model.S_Province { ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceName = dt.Rows[i]["ProvinceName"].ToString() };
listInfo.Add(m_Province);
}
JavaScriptSerializer jssp = new JavaScriptSerializer();
string s= jssp.Serialize(listInfo);
return s;
}
//市
private string Sel_City(HttpContext context)
{
string ProvinceID = context.Request.QueryString["ProvinceID"];
XieKe.BLL.S_City b_City = new XieKe.BLL.S_City();
DataTable dt = b_City.GetList("ProvinceID="+ProvinceID).Tables[];
List listInfo = new List();
for (int i = ; i < dt.Rows.Count; i++)
{
XieKe.Model.S_City m_City = new XieKe.Model.S_City { CityID = long.Parse(dt.Rows[i]["CityID"].ToString()), CityName = dt.Rows[i]["CityName"].ToString(), DateCreated = Convert.ToDateTime(dt.Rows[i]["DateCreated"]), DateUpdated = Convert.ToDateTime(dt.Rows[i]["DateUpdated"]), ProvinceID = long.Parse(dt.Rows[i]["ProvinceID"].ToString()), ZipCode = dt.Rows[i]["ZipCode"].ToString() };
listInfo.Add(m_City);
}
JavaScriptSerializer jssp = new JavaScriptSerializer();
return jssp.Serialize(listInfo);
}
//区
private string Sel_District(HttpContext context)
{
string CityID = context.Request.QueryString["CityID"];
XieKe.BLL.S_District b_City = new XieKe.BLL.S_District();
DataTable dt = b_City.GetList("CityID=" + CityID).Tables[];
List listInfo = new List();
for (int i = ; i < dt.Rows.Count; i++)
{
XieKe.Model.S_District m_District = new XieKe.Model.S_District { CityID = Convert.ToInt32(dt.Rows[i]["CityID"]), DistrictName = dt.Rows[i]["DistrictName"].ToString() };
listInfo.Add(m_District);
}
JavaScriptSerializer jssp = new JavaScriptSerializer();
return jssp.Serialize(listInfo);
}
public bool IsReusable
{
get
{
return false;
}
}
public enum GetType
{
省 = ,
市 = ,
区 = ,
};
}
}
使用jquery.ajax实现省市的二级联动(SSH架构)
首先实现jquery ajax的二级联动 要下载个jquery.js 我在这里就不准备了 自行百度下载 背景介绍:通过部门的ID来查找部门下的所有班级 我实现二级联动的思路是:先查询所有部门 显示在页 ...
jquery ajax实现省市二级联动
今天给大家带来使用jQuery ajax实现的省市联动效果.我们直奔主题,先说下实现思路: 准备数据 这里数据库我使用的是mysql,先看下表格: provience表 city表 这里使用provi ...
Json 基于jQuery+JSON的省市联动效果
helloweba.com 作者:月光光 时间:2012-09-12 21:57 标签: jQuery JSON Ajax 省市联动 省市区联动下拉效果在WEB中应用非常广泛,尤其在一些 ...
ajax做省市联动
原理: 当select.jsp页面打开时,向服务器发送异步请求,得到所有省份的名称(文本数据).然后使用每个省份名称创建,添加到
基于jQuery+JSON的省市联动效果
省市区联动下拉效果在WEB应用中使用非常广泛,尤其在一些会员信息系统.电商网站最为常见,开发者一般使用AJAX实现无刷新下拉联动. 本文将讲述利用jQuery插件,通过读取JSON数据,实现无刷新动态 ...
ASP.NET webform基于Jquery,AJAX的三级联动
主要html代码 --请选择省份--
用jQuery,ajax,实现三级联动封装JS的文件
// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "< ...
JQuery中的省市联动
html + ashx 实现Ajax省市联动
基本思路:1.了解数据库中省和市的表结构及关联主键 2.创建html页面及select标签 3.通过ajax向ashx(一般处理程序)发送后台请求完成联动效果 表结构: 这里,开始创建一个命为demo ...
随机推荐
react 和 ractive的区别
前面进项目的时候同事说项目在用react. 我没有深究,实际中发现是ractive.js.后来发现其实另有一个react.js.和ractive.js是有区别的.不过也有相似的地方. react项目的 ...
PHP如何释放内存之unset销毁变量并释放内存详解
PHP的unset()函数用来清除.销毁变量,不用的变量,我们可以用unset()将它销毁.但是某些时候,用unset()却无法达到销毁变量占用的内存!我们先看一个例子:
Linux 查杀进程
ps -eaf |grep "stoporder.php" | grep -v "grep"| awk '{print $2}'|xargs kill -9 # ...
Linux改变文件或目录的访问权限命令
使用 ll 或 ls -l 指令时 第一列会显示出目录下文件的权限 例如∶ -rw-r-r- 横线代表空许可.r代表只读,w代表写,x代表可执行.注意这里共有10个位置.第一个字符指定了文件类型 ...
Windows平台上安装搭建iPhone/iPad的开发环境
http://www.cnblogs.com/hanxianlong/archive/2015/09/20/4824227.html http://blog.csdn.net/yahohi/artic ...
Swift语言中与C/C++和Java不同的语法(三)
这一部分的主要内容是Swift中的Collections 我们知道Java中的Collection基本上是每一个Java程序猿接触到的第一个重要的知识点. 在Swift中也不例外,Swift中的Col ...
Antenna Placement POJ - 3020 二分图匹配 匈牙利 拆点建图 最小路径覆盖
题意:图没什么用 给出一个地图 地图上有 点 一次可以覆盖2个连续 的点( 左右 或者 上下表示连续)问最少几条边可以使得每个点都被覆盖 最小路径覆盖 最小路径覆盖=|G|-最大匹配数 ...
System.Web.UI.Page的页面基类
服务器端的page类 所有我们编写的页面都继承自page类,可见page类是非常重要的,page类提供了哪些功能,直接决定了我们的页面类可以继承什么功能,或者说,直接决定了我们的页面类功能的强大与否! ...
Linux 下 mysql的基本配置
Linux 下 mysql的基本配置 2013年02月27日 ⁄ MySQL ⁄ 共 3000字 ⁄ 暂无评论 ⁄ 被围观 2,483 views+ 1. Linux mysql安装: $ yu ...
Bata冲刺 第一天
一.冲刺第一天完成任务情况及贡献小时数: 姓名 今日已完成任务 时间(h) 马仲山 代码调整 2 马婧(12) 整理需求文档 2 马婧(13) 整理设计文档 2 马世芳 编写测试文档 2 张俊逸 ...