AJAX版省市区三级联动下拉框
2007-09-02 21:49
337 查看
AJAX版省市区三级联动下拉框
结合网上的一些代码，今天学习了一下AJAX的简单应用。写了一个AJAX版省市区三级联动下拉框。
源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明
主要有两个页面：default.aspx 和getResult.aspx
default.aspx的内容：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" language="javascript" >
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
function callServer() {
var ProvinceID = document.getElementById("drpProvince").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage1;
xmlHttp.send(null);
}
function callServer2() {
var ProvinceID = document.getElementById("drpCity").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage2;
xmlHttp.send(null);
}
function updatePage1() //更新市
{
if (xmlHttp.readyState == 4) {
//信息已经成功返回，开始处理信息
var returnStr = xmlHttp.responseText;
var xmlDom=new ActiveXObject("Microsoft.XmlDom");
xmlDom.loadXML(returnStr);
//Table :返回的XML根节点(如果不知道,可以看看...)
var newsItems=xmlDom.getElementsByTagName("city");
/*
将城市的下拉列表清空
*/
//alert(returnStr);
document.getElementById("TextArea1").value=returnStr;
document.getElementById("drpCity").length=0;
//清除地区列表的内容
document.getElementById("DDLDQ").length=0;
//循环获取多少条记录
for(var i=1;i<newsItems.length;i++)
{
var newsItem = newsItems[i];
var strID = newsItem.getElementsByTagName("id")[0].text;
var strCity = newsItem.getElementsByTagName("dq")[0].text;
//debugger;
//将获取的记录填充到城市的下拉列表中
document.all("drpCity").options.add(new Option(strCity,strID));
}
}
}
function updatePage2() //更新地区
{
if (xmlHttp.readyState == 4) {
//信息已经成功返回，开始处理信息
var returnStr = xmlHttp.responseText;
var xmlDom=new ActiveXObject("Microsoft.XmlDom");
xmlDom.loadXML(returnStr);
//Table :返回的XML根节点(如果不知道,可以看看...)
var newsItems=xmlDom.getElementsByTagName("city");
/*
将城市的下拉列表清空
*/
//alert(returnStr);
document.getElementById("TextArea1").value=returnStr;
document.getElementById("DDLDQ").length=0;
//循环获取多少条记录
for(var i=1;i<newsItems.length;i++)
{
var newsItem = newsItems[i];
var strID = newsItem.getElementsByTagName("id")[0].text;
var strCity = newsItem.getElementsByTagName("dq")[0].text;
//debugger;
//将获取的记录填充到城市的下拉列表中
document.all("DDLDQ").options.add(new Option(strCity,strID));
}
}
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label id="lbl_Province" runat="server">省份:</asp:Label>
<asp:DropDownList id="drpProvince" runat="server" Width="128px"></asp:DropDownList>
<asp:DropDownList id="drpCity" runat="server" Width="144px"></asp:DropDownList>
<asp:DropDownList ID="DDLDQ" runat="server" Width="150px">
</asp:DropDownList><br />
<textarea id="TextArea1"
cols="60" rows="20"></textarea></div>
</form>
</body>
</html>
default.aspx.cs的内容：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//调用客户端的方法
this.drpProvince.Attributes.Add("onchange", "callServer()");
this.drpCity.Attributes.Add("onchange", "callServer2()");
//绑定省份
this.ProvinceBind();
}
}
public void ProvinceBind() //绑定省数据
{
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
SqlCommand cmd = new SqlCommand("select sm,id from city where fdm=0", con);
con.Open();
SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();
MySqlAdapter.Fill(MyDataSet, "city");
this.drpProvince.DataSource = MyDataSet;
this.drpProvince.DataTextField = "sm";
this.drpProvince.DataValueField = "id";
this.drpProvince.DataBind();
if (this.drpProvince.Items.Count >0 )
{
drpCityBind(this.drpProvince.Items[0].Value);
}
}
public void drpCityBind(string fdm)//绑定市数据
{
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
SqlCommand cmd = new SqlCommand("select dq,id from city where fdm="+fdm, con);
con.Open();
SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();
MySqlAdapter.Fill(MyDataSet, "city");
this.drpCity.DataSource = MyDataSet;
this.drpCity.DataTextField = "dq";
this.drpCity.DataValueField = "id";
this.drpCity.DataBind();
}
}
服务端处理代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class getResult : System.Web.UI.Page
{
public SqlDataAdapter MyDataAdapter = new SqlDataAdapter();
public DataSet MyDataSet;
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
string ProvinceID = Request["fdm"].ToString();
if (ProvinceID.Length > 0)
{
Response.Clear();
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
MyDataSet = new DataSet("city");
SqlCommand MyCommand =new SqlCommand() ;
MyCommand.Connection =con;
MyCommand.CommandType = CommandType.Text
;
MyDataAdapter.TableMappings.Add("Table", "city");
MyCommand.CommandText = "select * from city where fdm=" + ProvinceID;
MyDataAdapter.SelectCommand = MyCommand;
MyDataAdapter.Fill(MyDataSet);
string chString = MyDataSet.GetXml();
Response.Clear();
Response.ContentType = "text/xml";
Response.Write(chString);
Response.End();
}
else
{
Response.Clear();
Response.End();
}
}
else
{
Response.Clear();
Response.End();
}
}
}
源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明
结合网上的一些代码，今天学习了一下AJAX的简单应用。写了一个AJAX版省市区三级联动下拉框。
源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明
主要有两个页面：default.aspx 和getResult.aspx
default.aspx的内容：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<script type="text/javascript" language="javascript" >
/* Create a new XMLHttpRequest object to talk to the Web server */
var xmlHttp = false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
try
{
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e2)
{
xmlHttp = false;
}
}
@end @*/
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
function callServer() {
var ProvinceID = document.getElementById("drpProvince").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage1;
xmlHttp.send(null);
}
function callServer2() {
var ProvinceID = document.getElementById("drpCity").value;
if ((ProvinceID == null) || (ProvinceID == "")) return;
var url = "getResult.aspx?fdm=" + escape(ProvinceID) ;
xmlHttp.open("GET", url, true);
xmlHttp.onreadystatechange = updatePage2;
xmlHttp.send(null);
}
function updatePage1() //更新市
{
if (xmlHttp.readyState == 4) {
//信息已经成功返回，开始处理信息
var returnStr = xmlHttp.responseText;
var xmlDom=new ActiveXObject("Microsoft.XmlDom");
xmlDom.loadXML(returnStr);
//Table :返回的XML根节点(如果不知道,可以看看...)
var newsItems=xmlDom.getElementsByTagName("city");
/*
将城市的下拉列表清空
*/
//alert(returnStr);
document.getElementById("TextArea1").value=returnStr;
document.getElementById("drpCity").length=0;
//清除地区列表的内容
document.getElementById("DDLDQ").length=0;
//循环获取多少条记录
for(var i=1;i<newsItems.length;i++)
{
var newsItem = newsItems[i];
var strID = newsItem.getElementsByTagName("id")[0].text;
var strCity = newsItem.getElementsByTagName("dq")[0].text;
//debugger;
//将获取的记录填充到城市的下拉列表中
document.all("drpCity").options.add(new Option(strCity,strID));
}
}
}
function updatePage2() //更新地区
{
if (xmlHttp.readyState == 4) {
//信息已经成功返回，开始处理信息
var returnStr = xmlHttp.responseText;
var xmlDom=new ActiveXObject("Microsoft.XmlDom");
xmlDom.loadXML(returnStr);
//Table :返回的XML根节点(如果不知道,可以看看...)
var newsItems=xmlDom.getElementsByTagName("city");
/*
将城市的下拉列表清空
*/
//alert(returnStr);
document.getElementById("TextArea1").value=returnStr;
document.getElementById("DDLDQ").length=0;
//循环获取多少条记录
for(var i=1;i<newsItems.length;i++)
{
var newsItem = newsItems[i];
var strID = newsItem.getElementsByTagName("id")[0].text;
var strCity = newsItem.getElementsByTagName("dq")[0].text;
//debugger;
//将获取的记录填充到城市的下拉列表中
document.all("DDLDQ").options.add(new Option(strCity,strID));
}
}
}
</script>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<div>
<asp:Label id="lbl_Province" runat="server">省份:</asp:Label>
<asp:DropDownList id="drpProvince" runat="server" Width="128px"></asp:DropDownList>
<asp:DropDownList id="drpCity" runat="server" Width="144px"></asp:DropDownList>
<asp:DropDownList ID="DDLDQ" runat="server" Width="150px">
</asp:DropDownList><br />
<textarea id="TextArea1"
cols="60" rows="20"></textarea></div>
</form>
</body>
</html>
default.aspx.cs的内容：
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Collections;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
//调用客户端的方法
this.drpProvince.Attributes.Add("onchange", "callServer()");
this.drpCity.Attributes.Add("onchange", "callServer2()");
//绑定省份
this.ProvinceBind();
}
}
public void ProvinceBind() //绑定省数据
{
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
SqlCommand cmd = new SqlCommand("select sm,id from city where fdm=0", con);
con.Open();
SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();
MySqlAdapter.Fill(MyDataSet, "city");
this.drpProvince.DataSource = MyDataSet;
this.drpProvince.DataTextField = "sm";
this.drpProvince.DataValueField = "id";
this.drpProvince.DataBind();
if (this.drpProvince.Items.Count >0 )
{
drpCityBind(this.drpProvince.Items[0].Value);
}
}
public void drpCityBind(string fdm)//绑定市数据
{
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
SqlCommand cmd = new SqlCommand("select dq,id from city where fdm="+fdm, con);
con.Open();
SqlDataAdapter MySqlAdapter = new SqlDataAdapter(cmd);
DataSet MyDataSet = new DataSet();
MySqlAdapter.Fill(MyDataSet, "city");
this.drpCity.DataSource = MyDataSet;
this.drpCity.DataTextField = "dq";
this.drpCity.DataValueField = "id";
this.drpCity.DataBind();
}
}
服务端处理代码：
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Data.SqlClient;
public partial class getResult : System.Web.UI.Page
{
public SqlDataAdapter MyDataAdapter = new SqlDataAdapter();
public DataSet MyDataSet;
private void Page_Load(object sender, System.EventArgs e)
{
if (!IsPostBack)
{
string ProvinceID = Request["fdm"].ToString();
if (ProvinceID.Length > 0)
{
Response.Clear();
SqlConnection con = new SqlConnection("uid=asptest;pwd=asptest;database=aspTest");
MyDataSet = new DataSet("city");
SqlCommand MyCommand =new SqlCommand() ;
MyCommand.Connection =con;
MyCommand.CommandType = CommandType.Text
;
MyDataAdapter.TableMappings.Add("Table", "city");
MyCommand.CommandText = "select * from city where fdm=" + ProvinceID;
MyDataAdapter.SelectCommand = MyCommand;
MyDataAdapter.Fill(MyDataSet);
string chString = MyDataSet.GetXml();
Response.Clear();
Response.ContentType = "text/xml";
Response.Write(chString);
Response.End();
}
else
{
Response.Clear();
Response.End();
}
}
else
{
Response.Clear();
Response.End();
}
}
}
源码下载：http://download.csdn.net/user/xcplates/AJAX ，里面说实验数据说明
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 用php和ajax写一个省市区的三级联动，实现地区的下拉选择
- AJAX省市区三级联动下拉列表实现 JAVA开发
- Ajax三级联动下拉选择省市区
- AJAX省市区三级联动下拉列表实现 JAVA开发
- Ajax来实现下拉框省市区三级联动效果（服务端基于express）
- 利用Ajax来实现下拉框的三级联动
- ajax——实现三级联动下拉列表
- 省市区三级联动菜单实现及三级联动下拉列表框默认值的设置
- javascript省市区三级联动下拉框菜单实例演示
- javascript省市区三级联动下拉框菜单实例演示
- 使用AJax和JavaScript实现省市区三级联动
- jquery省市区三级联动插件，无ajax
- 基于ThinkPHP+AJAX的省市区三级联动
- 省市区三级联动下拉框菜单javascript版
- Ajax+mybaits实现省市区三级联动
- 基于thinkphp和ajax的省市区三级联动
- ajax+jsp实现三级联动下拉框
- ajax+jsp实现三级联动下拉框
- jquery+ajax实现省市区三级联动 （封装和不封装两种方式）
- JS和Ajax 实现三级联动的下拉选择