Example of using jQuery HttpHandler xml to simulate a three-level linkage_jquery

The following is the implementation process:
Step 1: Prepare the xml file and place it in the root directory of the website, named Area.xml

Copy code The code is as follows:

Step 2 : Create entity classes corresponding to elements defined in xml files.
corresponds to province class

Copy code The code is as follows:

public class Province
{
private string id;
///

/// Number
///

public string Id
{
get { return id; }
set { id = value; }
}
private string name;
///

/// name
///

public string Name
{
get { return name; }
set { name = value; }
}
}

Corresponds to City class:

Copy code The code is as follows:

public class City
{
private string id;
///

/// number
///

public string Id
{
get { return id; }
set { id = value; }
}
private string name;
///

/ // Name
///

public string Name
{
get { return name; }
set { name = value; }
}
}

Corresponding county class:

Copy code The code is as follows:

public class County
{
private string id;
///

/// Number
///

public string Id
{
get { return id; }
set { id = value; }
}
private string name;
///

/// Name
///

public string Name
{
get { return name; }
set { name = value; }
}
}

Step 3: Write the server-side handler class: Handler.cs

Copy code The code is as follows:

///

2 /// Handler
3 ///

4 public class Handler : IHttpHandler
5 {
6
7 private static static JavaScriptSerializer jss = new JavaScriptSerializer();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string result = "failure";// The default return result is failure
HttpRequest req = context.Request;
string province = req["province"];//Get the number of the province selected by the user
string city = req["city"]; //Get the number of the city selected by the user
string county = req["county"];//Get the number of the county selected by the user
string type = req["type"];//Get what the user needs to get The type of list of provinces, cities and counties
InitDoc();
if (type.HasValue())
{
switch (type.ToLower())
{
case "province "://If the user needs to get a provincial list
result = jss.Serialize(GetProvinceList());
break;
case "city"://If the user needs to get a municipal list
result = jss.Serialize(GetCityListByProvince(province));
break;
case "county"://If the user needs to get a county-level list
result = jss.Serialize(GetCountyListByCity(province , city));
break;
default:
break;
}
}
//Return the result to the client in text format
context.Response. Write(result);
}
///

/// Initialize the document object
///

private void InitDoc()
{
if (doc == null)
{
doc = XDocument.Load(filePath);
}
}
///

// / Initialize provincial list
///

private List GetProvinceList()
{
List list = new List();
if (doc != null)
{
XElement root = doc.Root;
foreach (var prov in root.XPathSelectElements("province"))
{
list.Add( new Province()
{
Id = prov.Attribute("id").Value,
Name = prov.Attribute("name").Value
});
}
}
return list;
}
///

/// Get the municipal number based on the provincial number
///

/// Provincial number
private List GetCityListByProvince(string provId)
{
List list = new List< ;City>();
if (doc != null)
{
XElement root = doc.Root;
//xpath expression: /area/province[@id='1' ]/city
string queryPath = "/area/province[@id='" provId "']/city";
foreach (var city in root.XPathSelectElements(queryPath))
{
list.Add(new City()
{
Id = city.Attribute("id").Value,
Name = city.Attribute("name").Value
});
}
}
return list;
}
///

/// Get the county number based on the provincial number and city number
// /

/// Provincial number
/// City number< ;/param>
private List GetCountyListByCity(string provId, string cityId)
{
List list = new List();
if (doc != null )
{
XElement root = doc.Root;
string queryPath = "/area/province[@id='" provId "']/city[@id='" cityId "']/county ";
foreach (var county in root. Value,
Name = county.Attribute("name").Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return false;
}
}
}


Here, I use the XPathSelectElements(string xpath) method and the XPathSelectElement(string xpath) method under the System.Xml.XPath namespace to query the xml. In the method of obtaining the municipal number based on the provincial number, I use xpath expression (assuming the passed in provincial number is 1):/area/province[@id='1']/city, this expression starts with "/", indicating the use of absolute path, because area is the root node So starting from the area, then there is the province element below it. When I want to get the province element with an id attribute value of 1 among all the province elements under the area, I can use /area/province[@id='1'], that is, in Add the condition [@id='1'] after province, and then I get the province element with the id attribute of 1 under the area. Then I want to get all the cities under the province element, so I just need to add /city after it, so the final xpath expression is: /area/province[@id='1']/city.
Also, because the xml of this query is in the root directory of the current website, if it is elsewhere, then namespace must be added when querying
The values ​​read from the xml file will be assembled into corresponding After obtaining the entity object, I used the Serialize method in the JavaScriptSerializer class under the System.Web.Script.Serialization namespace to serialize the obtained entity object into json data and return it to the client.
Step 4: Write html and js.

Copy code The code is as follows:

- -

Regarding using jQuery to communicate with the server, I use the $.post method. For the specific use of this method, please refer to jQuery official documentation, what I want to say here is that when accessing through the object.property after traversal, the name of this property is case-sensitive. This name is the name defined on the server side, because the server serializes the entity object on the server side.
In this example, the key point is how to use XPath expressions and how to call the XPathSelectElements(string xpath) method under the System.Xml.XPath namespace.
The final result is as shown below:

Lines 13, 31 and 50 of code can be optimized.
It is not recommended to modify the DOM structure multiple times. You can splice strings and append once.
The data source is xml. I will use xslt to parse the xml and directly output , so that there is no need to splice strings in the frontend. It is required that all node IDs cannot be the same.

Copy code The code is as follows:

==请选择市==



==请选择县==