// In the example, the provincial/municipal secondary node does not need to be refreshed, and the provincial/municipal connection server dynamically loads the municipal name
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "ajaxcity. aspx. cs" inherits = "ajaxcity" %>
<! Doctype HTML public "-// W3C // dtd xhtml 1.0 strict // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Title> obtain the city name by province name </title>
<SCRIPT type = "text/JavaScript">
VaR XMLHTTP;
// Create an XMLHTTPRequest object
Function createhttp ()
{
If (window. activexobject)
{
XMLHTTP = new activexobject ("Microsoft. XMLHTTP ");
}
Else
{
XMLHTTP = new XMLHttpRequest ();
}
}
Function showcity ()
{
VaR url = "showcity. aspx? Id = "+ document. getelementbyid (" Province "). value;
// Create an XMLHTTPRequest object
Createhttp ();
// Specify the Server Response Function
XMLHTTP. onreadystatechange = showres;
XMLHTTP. Open ("get", URL, true );
XMLHTTP. Send (null );
}
Function showres ()
{
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200)
{
Addcity ();
}
}
}
// Add a city name based on the province name
Function addcity ()
{
VaR citys = Document. getelementbyid ("city ");
Clearoptions (citys );
// Obtain server response data
VaR TXT = XMLHTTP. responsetext;
VaR res = TXT. Split (",");
// Add new data
For (VAR I = 0; I <res. length; I ++)
{
VaR opt = Document. createelement ("option ");
Opt. Text = res [I];
Opt. value = I;
Citys. Options. Add (OPT );
}
}
// Clear historical records
Function clearoptions (citys)
{
For (VAR I = Citys. Options. length; I>-1; I --)
{
Citys. Options. Remove (I );
}
}
</SCRIPT>
</Head>
<Body>
<Select id = "Province" runat = "server" style = "width: 141px" onchange = "showcity ();">
<Option selected = "selected" value = "1"> Hubei </option>
<Option value = "2"> Jiangsu </option>
<Option> </option>
</SELECT>
<Select id = "city" runat = "server" style = "width: 139px">
<Option selected = "selected"> </option>
</SELECT>
</Body>
</Html>
Using system;
Using system. Data;
Using system. Data. sqlclient;
Using system. configuration;
Using system. collections;
Using system. Web;
Using system. text;
Using system. IO;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Public partial class showcity: system. Web. UI. Page
{
Protected void page_load (Object sender, eventargs E)
{
If (! This. ispostback)
{
String id = request. querystring ["ID"]. tostring ();
This. showinfo (ID );
}
}
/// <Summary>
/// Query the city name by province ID
/// </Summary>
/// <Param name = "ID"> </param>
Private void showinfo (string ID)
{
Sqlconnection con = new sqlconnection ("Data Source = (local); initial catalog = Master; Integrated Security = sspi ");
Sqlcommand cmd = new sqlcommand ("select * from city where pid =" + Int. parse (ID), con );
Con. open ();
Sqldatareader READ = cmd. executereader ();
Stringbuilder STR = new stringbuilder ();
While (read. Read ())
{
Str. append (read ["cityname"]. tostring () + ",");
}
Response. Write (STR );
}
}