jQuery HttpHandler xml을 사용하여 3레벨 linkage_jquery를 시뮬레이션하는 예

구현 과정은 다음과 같습니다.
1단계: xml 파일을 준비하여 웹사이트의 루트 디렉터리인 Area.xml에 넣습니다.

코드 복사 코드는 다음과 같습니다.

🎜>










;county id=" 1" name="한단현" />

성>

" name="룽화구" />






2단계: xml 파일에 정의된 요소에 해당하는 엔터티 클래스를 만듭니다.
지방 클래스에 해당




코드 복사

코드는 다음과 같습니다.


공개 클래스

{ 비공개 문자열 ID /// /// 숫자/// 문자열 ID { get { return id }

set { id = value }

}
개인 문자열 이름
///

// 이름
///

공개 문자열 이름
{
get { return name; }
set { name = value }
}


City 클래스에 해당:




코드 복사





공개 클래스 도시

{
비공개 문자열 ID
///

/// 숫자/// < ;/summary> 공개 문자열 ID { get { return id } set { id = value } }

비공개 문자열 이름;

/ // 이름
///

공개 문자열 이름
{
get { return name }
set { name = value; }
}
}


해당 카운티 클래스:




코드 복사


코드는 다음과 같습니다.


public class County
{

private string id
///

///

공개 문자열 ID { get { return id } set { id = value } } ; ///

/// 이름

///
공개 문자열 이름
{
get { 반환 이름; >set { name = value; }
}
}


3단계: 서버측 핸들러 클래스 작성: Handler.cs




코드 복사


코드는 다음과 같습니다.

///

2 /// 핸들러
3 ///

4 공용 클래스 핸들러 : IHttpHandler
5 {
6
7 private static static JavaScriptSerializer jss = new JavaScriptSerializer();
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain"
string result; = "failure";// 기본 반환 결과는 실패입니다
HttpRequest req = context.Request
string Province = req["province"];//사용자가 선택한 지방 번호를 가져옵니다
string city = req["city"]; //사용자가 선택한 도시 번호 가져오기
string county = req["county"];//사용자가 선택한 카운티 번호 가져오기
string type = req["type"];//사용자가 가져오는 데 필요한 항목 가져오기 성, 시, 군 목록 유형
InitDoc()
if (type.HasValue())
{
switch (type.ToLower())
{
case "province"://사용자가 지방 목록을 가져와야 하는 경우
result = jss.Serialize(GetProvinceList());
break;
case "city"://사용자가 지방자치단체 목록을 가져와야 하는 경우
result = jss.Serialize(GetCityListByProvince(province))
break
case "county; "://사용자가 카운티 수준 목록을 가져와야 하는 경우
result = jss.Serialize(GetCountyListByCity(province , city));
break;
default:
break;
}
}
//결과를 텍스트 형식으로 클라이언트에 반환합니다.
context.Response.Write(result)
}
///

/ 문서 객체 초기화
///

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

// / 지방 목록 초기화
///

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
})
}
}
반환 목록
}///

🎜>/// 지방 번호를 기준으로 지방자치단체 번호 가져오기
///

/// 지방 번호 private List GetCityListByProvince(string provId)
{
List list = new List< ;City>()
if (doc != null)
{
XElement 루트 = doc.Root;//xpath 표현식: /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"). 값,
Name = city.Attribute("name").Value
});
}
}
return list; ;
/// 주 번호와 도시 번호를 기준으로 카운티 번호 가져오기
// /
/// 주 번호/// 도시 번호
비공개 목록 GetCountyListByCity(string provId, string cityId)
{
목록 ; 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; }
}
}


여기에서는 System.Xml.XPath 네임스페이스 아래의 XPathSelectElements(string xpath) 메서드와 XPathSelectElement(string xpath) 메서드를 사용하여 xml을 쿼리합니다. xpath 표현식 사용(전달된 지방 번호가 1이라고 가정):/area/province[@id='1']/city, 이 표현식은 "/"로 시작합니다. 이는 Area가 루트 노드이기 때문에 절대 경로 사용을 나타냅니다. 따라서 지역에서 시작하면 그 아래에 지방 요소가 있습니다. 해당 지역 아래의 모든 지방 요소 중에서 id 속성 값이 1인 지방 요소를 가져오려면 /area/province[@id=를 사용할 수 있습니다. '1'], 즉 지방 뒤에 [@id='1'] 조건을 추가하면 해당 지역 아래에 id 속성이 1인 지방 요소를 가져옵니다. 그런 다음 지방 요소 아래의 모든 도시를 가져오고 싶으므로 그 뒤에 /city를 추가하면 됩니다. 따라서 최종 xpath 표현은 /area/province[@id='1']/city입니다.
또한 이 쿼리의 xml은 현재 웹사이트의 루트 디렉터리에 있으므로 다른 곳에 있다면 쿼리 시 네임스페이스를 추가해야 합니다.
xml 파일에서 읽어온 값은 해당하는 엔터티 개체를 얻은 후 System.Web.Script.Serialization 네임스페이스 아래 JavaScriptSerializer 클래스의 Serialize 메서드를 사용하여 얻은 엔터티 개체를 json 데이터로 직렬화하고 클라이언트에 반환했습니다.
4단계: html과 js를 작성합니다.

코드 복사 코드는 다음과 같습니다.

script type="text /javascript">
$(function () {
$.post("/Handler.ashx", { "type": "province" }, function (데이터, 상태) {
if ( status == "success") {
if (data != "failure") {
data = $.parseJSON(data) //서버에서 반환된 json 데이터 구문 분석
for (var i = 0 ; i < data.length; i ) {
var value = data[i].Id ":" data[i].Name; 형식: "번호:이름"
$("#province").append("" data[i].Name "");
}
}
}
}, "text")
$("#province").change(function () {
var selectValue = $(this). val(); //선택한 지방 옵션 값 가져오기
var provId = selectValue.split(':')[0] //번호 가져오기
var provTxt = selectValue.split(':') [1]; //이름 가져오기
$("#txtProvince").html(provTxt) //선택한 지방의 이름 표시
$("#city").html("< option>==도시를 선택하세요==< /option>"); //지방 수준이 변경되면 도시 수준을 삭제하세요
$("#county").html("==제발 카운티 선택=="); //지방 수준이 변경되면 카운티 수준 지우기
$.post("/Handler.ashx", { "province": provId, "type": " city" }, function (data, status) {
if (status == "success") {
if (data != "failure") {
data = $.parseJSON(data);
for (var i = 0; i < data .length; i ) {
var value = data[i].Id ":" data[i].Name
$("#city" ).append("" data[i].Name "")
}
}
}
}, "텍스트");
});
$("#city").change(function () {
var provId = $("#province").val().split(': ')[0];
var selectValue = $ (this).val(); //위와 동일
var cityId = selectValue.split(':')[0]; 🎜>var cityTxt = selectValue.split(':')[1]; //위와 동일
$("#txtCity").html(cityTxt) //선택한 도시의 이름을 표시합니다
$("#county").html("==카운티를 선택하세요 ==") //위와 동일
$.post("/Handler.ashx", { "province": provId, "city": cityId, "type": "county" }, function (data, status) {
if (status == "success") {
if (data != "실패") {
data = $.parseJSON(data);
for (var i = 0; i < data.length; i ) {
var value = data[i].Id " :" data[i].Name;
$("#county").append(" " data[i].Name "") ;
}
}
}
}, "텍스트")
})
$("#county").change(function () {
$ ("#txtCounty").html($(this).val().split(':' )[1]) //선택한 카운티 이름 표시
})
});








<--카운티-->


🎜>-



jQuery를 사용하여 서버와 통신하는 경우에는 $.post 메소드를 사용합니다. 이 메소드의 구체적인 사용법은 jQuery 공식 문서를 참조하세요. 여기서 말씀드리고 싶은 것은 순회 후 object.property를 통해 액세스할 때라는 것입니다. , 이 속성의 이름은 대소문자를 구분합니다. 서버가 서버 측에서 엔터티 개체를 직렬화하기 때문에 이 이름은 서버 측에서 정의된 이름입니다.
이 예에서 핵심은 XPath 식을 사용하는 방법과 System.Xml.XPath 네임스페이스에서 XPathSelectElements(string xpath) 메서드를 호출하는 방법입니다.
최종 결과는 아래와 같습니다.

코드의 13, 31, 50번째 줄을 최적화할 수 있습니다.
DOM 구조를 여러 번 수정하는 것은 권장되지 않습니다. 문자열을 연결하고 한 번만 추가하면 됩니다.
데이터 소스는 xml입니다. xml을 구문 분석하고 을 직접 출력하겠습니다. 프런트엔드에서 문자열을 연결할 필요가 없습니다. 모든 노드 ID는 동일할 수 없습니다.



코드 복사

코드는 다음과 같습니다.

<옵션>==请选择시장==



<옵션>==请选择县==