jQuery HttpHandler xml을 사용하여 3레벨 linkage_jquery를 시뮬레이션하는 예
- WBOY원래의
- 2016-05-16 18:03:39981검색
구현 과정은 다음과 같습니다.
1단계: xml 파일을 준비하여 웹사이트의 루트 디렉터리인 Area.xml에 넣습니다.
코드 복사 코드는 다음과 같습니다.
🎜>
2단계: xml 파일에 정의된 요소에 해당하는 엔터티 클래스를 만듭니다.
코드 복사
공개 클래스
{ 비공개 문자열 ID /// /// 숫자/// 문자열 ID { get { return id }
set { id = value } }
개인 문자열 이름
/// // 이름
///
공개 문자열 이름
{
get { return name; }
set { name = value }
}
코드 복사
공개 클래스 도시
{ 개인 문자열 이름
///
///
공개 문자열 이름
{
get { return name; }
set { name = value }
}
코드 복사
공개 클래스 도시
비공개 문자열 ID
///
/// 숫자/// < ;/summary> 공개 문자열 ID { get { return id } set { id = value } }
비공개 문자열 이름; / // 이름
///
공개 문자열 이름
{
get { return name }
set { name = value; }
}
}
코드 복사
코드는 다음과 같습니다.
public class County
{
private string id ///
공개 문자열 이름
{
get { return name }
set { name = value; }
}
}
코드 복사
코드는 다음과 같습니다.
public class County
{
///
///
공개 문자열 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를 작성합니다.
시, 군 3단계 링크 드롭다운 목록
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("");
}
}
}
}, "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("")
}
}
}
}, "텍스트");
});
$("#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(" ") ;
}
}
}
}, "텍스트")
})
$("#county").change(function () {
$ ("#txtCounty").html($(this).val().split(':' )[1]) //선택한 카운티 이름 표시
})
});
코드의 13, 31, 50번째 줄을 최적화할 수 있습니다.
DOM 구조를 여러 번 수정하는 것은 권장되지 않습니다. 문자열을 연결하고 한 번만 추가하면 됩니다.
데이터 소스는 xml입니다. xml을 구문 분석하고
공개 문자열 이름
{
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)
}
}
///
// / 지방 목록 초기화
///
{
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
{
List
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; ;
/// 주 번호와 도시 번호를 기준으로 카운티 번호 가져오기
// /
/// 주 번호/// 도시 번호
비공개 목록
{
목록
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("");
}
}
}
}, "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("")
}
}
}
}, "텍스트");
});
$("#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(" ") ;
}
}
}
}, "텍스트")
})
$("#county").change(function () {
$ ("#txtCounty").html($(this).val().split(':' )[1]) //선택한 카운티 이름 표시
})
});
코드의 13, 31, 50번째 줄을 최적화할 수 있습니다.
DOM 구조를 여러 번 수정하는 것은 권장되지 않습니다. 문자열을 연결하고 한 번만 추가하면 됩니다.
데이터 소스는 xml입니다. xml을 구문 분석하고
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.