Shulou(Shulou.com)06/03 Report--

This article mainly explains "an example of how to call AJAX". Friends who are interested may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "an example of how to call AJAX".

Example 1: province-city drop-down box

Use AJAX to obtain data to realize cascading drop-down boxes. When the options of provincial drop-down boxes change, the options of cities change accordingly, as shown in the figure:

Let's first implement the background, first prepare the data to obtain the data in the foreground, [consider: when we log in to the page, we need to get the data]: 1). The province in the province box; 2). Because the first item in the province box is selected when logging in, you also need the city name corresponding to the first province. OK, the code is easy to write when the needs are known, and the background code is affixed directly:

Protected void Page_Load (object sender, EventArgs e) {if (Request.QueryString ["provid"]! = null) {/ / first get the passed parameter value string provId = Request.QueryString ["provid"] .ToString () / / query all cities string sqlprov = "select * from Provice"; SqlDataReader reader = DbHelperSQL.ExecuteReader (sqlprov); string resultProv = ""; while (reader.Read ()) {string id = reader [0] .ToString () String provName = reader [1] .ToString (); / / string concatenation. For the foreground to obtain the corresponding data, use'|'to isolate each province resultProv + = "|" + string.Format ("{0}, {1}", id, provName). } reader.Close (); / / obtain the corresponding city name string sqlcity = string.Format ("select * from City where Proid=' {0}'", provId) according to the ID of the province box; SqlDataReader readercity = DbHelperSQL.ExecuteReader (sqlcity); string resultCity = "" While (readercity.Read ()) {string cityId = readercity [1] .ToString (); string cityName = readercity [2] .ToString () / / also use string concatenation with'|'to isolate cities in the same province resultCity + = "|" + string.Format ("{0}, {1}", cityId, cityName) } / / remove the first'| 'and splice' &'at the end to distinguish between province and city resultProv = resultProv.Substring (1) + "&" / / the final result form is [id, province name | id2, province name 2 |.... & id, city name | id2, city name 2 |.] string result = resultProv + resultCity.Substring (1); Response.Write (result); Response.End ();}}

The background code is actually very simple, which is to obtain the corresponding data from the database according to the passed parameters, but here we finally concatenate the obtained data with strings, and they are stitched together regularly. Why? In fact, it has been made clear in the notes that it is convenient for the foreground to get the corresponding data, because we use the background to return the data in text form, which is why we concatenate the strings.

Next, let's implement the foreground. The main task of the foreground is to obtain the data returned by the background and bind it. It is also affixed to the code in blocks.

/ / instantiate the XmlHttpRequest object var xhr = null; function CreateXhr () {if (window.ActiveXObject) {try {xhr = new ActiveXObject ("Microsoft.XMLHTTP") } catch (e) {try {xhr = new ActiveXObject ("Msxml2.XMLHTTP") } catch (e) {xhr = null;} if (window.XMLHttpRequest) {xhr = new XMLHttpRequest () } return xhr;}

When the page is loaded, bind the province box and the city box corresponding to the first province, code:

/ / load binding province function getLoadProv () {CreateXhr (); xhr.onreadystatechange = WatchState; xhr.open ("get", "getProvCity.aspx?provid=1&time=" + new Date ()); xhr.send (null) } / / listen to the loading timing status function WatchState () {if (xhr.readyState = = 4 & & xhr.status = = 200) {/ / 1 var result * | 2 var result = result.split ('&') [0] .split ('|') Var citys = result.split ('&') [1] .split ('|'); / / Provincial drop-down box clear document.forms [0] .prov.length = 0; / / bind provincial box for (var I = 0; I < provs.length) Var prov +) {var prov = provs [I] .split (','); / / instantiate an option var op = new Option (); op.value = prov [0]; op.text = prov [1]; document.forms [0] .prov.options.add (op) } / / the city drop-down box clears document.forms [0] .city.length = 0; / binds the city box for (var j = 0; j < citys.length; jacks +) {var city = citys [j] .split (',') Var op = new Option (); op.value = city [0]; op.text = city [1]; document.forms [0] .city.options.add (op);}

Implement cascading changes when the options of the province box change, code:

/ / get city function GetCity () {/ / get the value selected in the province box var provId = document.forms [0] .prov.value; CreateXhr (); xhr.onreadystatechange = UpdateCity; xhr.open ("get", "getProvCity.aspx?provid=" + provId + "& time=" + new Date ()); xhr.send (null) } / / modify the content of the city drop-down box function UpdateCity () {if (xhr.readyState = = 4 & & xhr.status = = 200) {var result = xhr.responseText; var citys = result.split ('&') [1] .split ('|'); / / clear the city drop-down box document.forms [0] .city.length = 0 / bind city box for (var j = 0; j < citys.length; jacks +) {var city = citys [j] .split (','); var op = new Option (); op.value = city [0]; op.text = city [1]; document.forms [0] .city.options.add (op) }}

Foreground html code:

Html

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.