Ajax实现省市县三级联动
自己手写的Ajax,由XmlRequest对象向服务端发送页面请求，然后返回一个字符串到客户端。
Default.aspx.cs页面全部代码
Codeusing System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;
public partial class _Default : System.Web.UI.Page
{
SqlConnection sqlconn = null;
string ConnString = System.Configuration.ConfigurationManager.AppSettings["ConnString"].ToString();
protected void Page_Load(object sender, EventArgs e)
{
this.ddlProvince.Attributes.Add("onchange", "fun()");
this.ddlCity.Attributes.Add("onchange", "show()");
this.ddlCounty.Items.Insert(0, new ListItem("请选择", "0"));
this.ddlProvince.SelectedIndex = 0;
if (!IsPostBack)
{
string sql = "select * from Province";
DataSet ds = Brand(sql);
this.ddlCity.Items.Insert(0, new ListItem("请选择", "0"));
this.ddlProvince.DataSource = ds;
this.ddlProvince.DataTextField = "Name";
this.ddlProvince.DataValueField = "code";
this.ddlProvince.DataBind();
if (this.ddlProvince.Items.Count > 0)
{
this.ddlProvince.Items.Insert(0, new ListItem("请选择", "0"));
this.ddlProvince.SelectedIndex = 0;
}
}
if (Request.QueryString["index"] != null)
{
int ddlvalue =Convert.ToInt32(Request.QueryString["index"].ToString());
if (ddlvalue != 0)
{
string sql = "select * from city where provinceId =" + ddlvalue;
result(sql);
}
else
{
Response.Write("false");
Response.Flush();
Response.End();
}
}
if (Request.QueryString["value"] != null)
{
int ddlvalue = Convert.ToInt32(Request.QueryString["value"].ToString());
if (ddlvalue != 0)
{
string sql = "select * from area where cityid =" + ddlvalue;
result(sql);
}
else
{
Response.Write("false");
Response.Flush();
Response.End();
}
}
}
public void result(string sql)
{
DataSet ds = Brand(sql);
Response.Write(returnvalue(ds));
Response.Flush();
Response.End();
}
public string returnvalue(DataSet ds)
{
string str = "";
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
str += ds.Tables[0].Rows[i]["code"].ToString() + "," + ds.Tables[0].Rows[i]["name"].ToString() + "|";
}
str = str.Substring(0, str.Length - 1);
return str;
}
public DataSet Brand(string sql)
{
DataSet ds = null;
try
{
sqlconn = new SqlConnection(ConnString);
SqlDataAdapter sqlda = new SqlDataAdapter(sql, sqlconn);
ds= new DataSet();
sqlda.Fill(ds);
return ds;
}
catch
{
return ds;
}
finally
{
if (sqlconn != null)
{
sqlconn.Close();
}
}
}
}
Default.aspx页面代码
Code<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>ajax实现二级联动</title>
<script type ="text/javascript">
var xmlHttp = false;
try {
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
xmlHttp = false;
}
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
xmlHttp = new XMLHttpRequest();
}
if (!xmlHttp){
alert("AJAX服务对象创建失败！");
}
function fun()
{
var obj = document.getElementById("ddlProvince");
if(document.getElementById("ddlCity").length!=0)
{
document.getElementById("ddlCity").length=0;
}
var ddlvalue = obj.options[obj.selectedIndex].value;
if(document.getElementById("ddlCounty").length!=0)
{
document.getElementById("ddlCounty").length=0;
}
document.getElementById("ddlCounty").options.add(new Option("请选择","0"));
xmlHttp.open("GET","Default.aspx?index="+ddlvalue);
xmlHttp.onreadystatechange = result;
xmlHttp.send(null);
}
function result()
{
if(xmlHttp.readyState==4)
{
if(xmlHttp.status==200)
{
var list = xmlHttp.responseText;
if(list!="false")
{
document.getElementById("ddlCity").options.add(new Option("请选择","0"));
var arry = list.split("|");
for(var i=0;i< arry.length;i++)
{
var item = arry[i].split(",");
document.getElementById("ddlCity").options.add(new Option(item[1],item[0]));
}
}
else
{
if(document.getElementById("ddlCity").length!=0)
{
document.getElementById("ddlCity").length=0;
}
document.getElementById("ddlCity").options.add(new Option("请选择","0"));
}
}
}
}
function show()
{
var obj = document.getElementById("ddlCity");
if(document.getElementById("ddlCounty").length!=0)
{
document.getElementById("ddlCounty").length=0;
}
var str = obj.options[obj.selectedIndex].value;
xmlHttp.open("GET","Default.aspx?value="+str);
xmlHttp.onreadystatechange= returnfun;
xmlHttp.send(null);
}
function returnfun()
{
if(xmlHttp.readyState ==4)
{
if(xmlHttp.status ==200)
{
var list = xmlHttp.responseText;
if(list!="false")
{
var arry = list.split("|");
for(var i=0;i< arry.length;i++)
{
var item = arry[i].split(",");
document.getElementById("ddlCounty").options.add(new Option(item[1],item[0]));
}
}
else
{
if(document.getElementById("ddlCounty").length!=0)
{
document.getElementById("ddlCounty").length=0;
}
document.getElementById("ddlCounty").options.add(new Option("请选择","0"));
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DropDownList ID="ddlProvince" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server">
</asp:DropDownList>
<asp:DropDownList ID="ddlCounty" runat="server">
</asp:DropDownList>
</div>
</form>
</body>
</html>
