Ajax例子

article/2025/10/6 5:39:31

Ajax实现无刷新三联动下拉框

1.html代码

< HTML >

< HEAD >

< title > Ajax实现无刷新三联动下拉框 </ title >

< meta content ="Microsoft Visual Studio .NET 7.1" name ="GENERATOR" >

< meta content ="C#" name ="CODE_LANGUAGE" >

< meta content ="JavaScript" name ="vs_defaultClientScript" >

< meta content ="http://schemas.microsoft.com/intellisense/ie5" name ="vs_targetSchema" >

< SCRIPT language ="javascript" >

//城市------------------------------

function cityResult()

{

var city=document.getElementById("DropDownList1");

AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);

}

function get_city_Result_CallBack(response)

{

if (response.value != null)

{

//debugger;

document.all("DropDownList2").length=0;　　　　

　　　　 var ds = response.value;

if(ds != null && typeof(ds) == "object" && ds.Tables != null)

{

for(var i=0; i<ds.Tables[0].Rows.length; i++)

　　　　 {

　　　　 var name=ds.Tables[0].Rows[i].city;

　　　　　　 var id=ds.Tables[0].Rows[i].cityID;

　　　　　　 document.all("DropDownList2").options.add(new Option(name,id));

　　　　 }

return

}

//市区----------------------------------------

function areaResult()

{

var area=document.getElementById("DropDownList2");

AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);

}

function get_area_Result_CallBack(response)

{

if (response.value != null)

{

document.all("DropDownList3").length=0;　　　　

　　　　 var ds = response.value;

if(ds != null && typeof(ds) == "object" && ds.Tables != null)

{

for(var i=0; i<ds.Tables[0].Rows.length; i++)

　　　　 {

　　　　　　 var name=ds.Tables[0].Rows[i].area;

　　　　　　 var id=ds.Tables[0].Rows[i].areaID;

　　　　　　 document.all("DropDownList3").options.add(new Option(name,id));

　　　　 }

return

}

function getData()

{

var province=document.getElementById("DropDownList1");

var pindex = province.selectedIndex;

var pValue = province.options[pindex].value;

var pText = province.options[pindex].text;

var city=document.getElementById("DropDownList2");

var cindex = city.selectedIndex;

var cValue = city.options[cindex].value;

var cText = city.options[cindex].text;

var area=document.getElementById("DropDownList3");

var aindex = area.selectedIndex;

var aValue = area.options[aindex].value;

var aText = area.options[aindex].text;

var txt=document.getElementById("TextBox1");

document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;

}

</ SCRIPT >

</ HEAD >

< body ms_positioning ="GridLayout" >

< form id ="Form1" method ="post" runat ="server" >

< TABLE id ="Table1" style ="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing ="1"

cellPadding ="1" width ="300" border ="1" bgColor ="#ccff66" >

< TR >

< TD > 省市 </ TD >

< TD >< asp:dropdownlist id ="DropDownList1" runat ="server" ></ asp:dropdownlist ></ TD >

</ TR >

< TR >

< TD > 城市 </ TD >

< TD >< asp:dropdownlist id ="DropDownList2" runat ="server" ></ asp:dropdownlist ></ TD >

</ TR >

< TR >

< TD > 市区 </ TD >

< TD >< asp:dropdownlist id ="DropDownList3" runat ="server" ></ asp:dropdownlist ></ TD >

</ TR >

</ TABLE >

< asp:TextBox id ="TextBox1" style ="Z-INDEX: 102; LEFT: 416px; POSITION: absolute; TOP: 48px" runat ="server"

Width ="424px" ></ asp:TextBox >< INPUT style ="Z-INDEX: 103; LEFT: 456px; WIDTH: 56px; POSITION: absolute; TOP: 96px; HEIGHT: 24px"

type ="button" value ="test" onclick ="getData();" >

</ form >

</ body >

</ HTML >

2.cs代码

public class WebForm1 : System.Web.UI.Page

{

protected System.Web.UI.WebControls.DropDownList DropDownList1;

protected System.Web.UI.WebControls.DropDownList DropDownList2;

protected System.Web.UI.WebControls.TextBox TextBox1;

protected System.Web.UI.WebControls.DropDownList DropDownList3;

private void Page_Load(object sender, System.EventArgs e)

{

Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));

if(!Page.IsPostBack)

{

this.DropDownList1.DataSource=AjaxMethod.GetPovinceList();

this.DropDownList1.DataTextField="province";

this.DropDownList1.DataValueField="provinceID";

this.DropDownList1.DataBind();

this.DropDownList1.Attributes.Add("onclick","cityResult();");

this.DropDownList2.Attributes.Add("onclick","areaResult();");

}

Web Form Designer generated code

}

3.AjaxMethod

using System;

using System.Data;

using System.Data.SqlClient;

namespace AjaxTest

{

/// <summary>

/// Summary description for AjaxMethod.

/// </summary>

public class AjaxMethod

{

GetPovinceList

GetCityList

GetAreaList

GetDataSet

}

4.web.config

< httpHandlers >

< add verb ="POST,GET" path ="ajax/*.ashx" type ="Ajax.PageHandlerFactory, Ajax" />

</ httpHandlers >

5.ajax.dll下载 /Files/singlepine/Ajax.rar
6.真实数据库下载 /Files/singlepine/area.rar
7.具体配置参见 http://singlepine.cnblogs.com/articles/253393.html
8.源代码下载 /Files/singlepine/AjaxTest.rar
9. XmlHttp实现无刷新三联动下拉框

posted on