Maison > interface Web > js tutoriel > le corps du texte

使用jQuery+HttpHandler+xml模拟一个三级联动的例子_jquery

WBOY
Libérer: 2016-05-16 18:03:39
original
989 Les gens l'ont consulté

如下是实现过程:
第一步:准备xml文件,并放置在网站根目录下,名为Area.xml

复制代码 代码如下:
































第二步:创建与xml文件中定义的元素对应的实体类。
对应province类
复制代码 代码如下:

public class Province
{
private string id;
///
/// 编号
///

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

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

对应City类:
复制代码 代码如下:

public class City
{
private string id;
///
/// 编号
///

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

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

对应county类:
复制代码 代码如下:

public class County
{
private string id;
///
/// 编号
///

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

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

第三步:编写服务器端处理程序类:Handler.cs
复制代码 代码如下:

///
2 /// 处理程序
3 ///

4 public class Handler : IHttpHandler
5 {
6
7 private static XDocument doc;
8 private string filePath = HttpContext.Current.Server.MapPath("~/Area.xml");
9 //javascript序列化类
private 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);
}
}
///
/// 初始化省级列表
///

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;
}
///
/// 根据省级编号获取市级编号
///

/// 省级编号
private List GetCityListByProvince(string provId)
{
List list = new List();
if (doc != null)
{
XElement root = 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").Value,
Name = city.Attribute("name").Value
});
}
}
return list;
}
///
/// 根据省级编号和市级编号获取县级编号
///

/// 省级编号
/// 市级编号
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.XPathSelectElements(queryPath))
{
list.Add(new County()
{
Id = county.Attribute("id").Value,
Name = county.Attribute("name").Value
});
}
}
return list;
}
public bool IsReusable
{
get
{
return false;
}
}
}

在这里,查询xml我采用的是System.Xml.XPath命名空间下的XPathSelectElements(string xpath)方法和XPathSelectElement(string xpath)方法,在根据省级编号获取市级编号的方法里面,我使用了xpath表达式(假设传入的省级编号为1):/area/province[@id='1']/city,这个表达式以“/”开头,表示使用绝对路径,因为area为根节点所以从area开始,接着它下面有province元素,当我想获取area下所有province元素中id属性值为1的province元素时,我可以使用/area/province[@id='1'],即在province后面加上[@id='1']这个条件,这时我就获取到了area下id属性为1的province元素了。接着我要获取该province元素下所有的city,那么只需在后面加上/city即可,所以最终的xpath表达式为:/area/province[@id='1']/city。
还有,因为此查询的xml是在当前网站的根目录,如果是在其它地方,那么在查询的时候要加上namespace
将从xml文件中读取到的值组装成对应的实体对象只后,我使用了System.Web.Script.Serialization命名空间下的JavaScriptSerializer类中的Serialize方法将得到的实体对象序列化成json数据返回给客户端。
第四步:编写html和js。
复制代码 代码如下:



省市县三级联动下拉列表












- -



关于使用jQuery与服务器通信,我使用的是$.post方法,该方法的具体使用可以参考jQuery官方文档,这里我想说的是,遍历后通过对象.属性访问时,这个属性的名字是区分大小写的,这个名字是服务器端定义的名字,因为服务器序列化的是服务器端的实体对象。
在这个例子中,关键点就是如何使用XPath表达式,如何调用System.Xml.XPath命名空间下的XPathSelectElements(string xpath)方法。
最终结果如下图:
使用jQuery+HttpHandler+xml模拟一个三级联动的例子_jquery
代码13,31,50行可以优化。
不建议多次修改DOM结构,可以拼接字符串后一次append
数据源是xml,我会用xslt来解析xml直接输出
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal