使用jQuery+HttpHandler+xml模拟一个三级联动的例子_jquery
程序员文章站
2022-04-26 17:53:59
...
如下是实现过程：
第一步：准备xml文件，并放置在网站根目录下，名为Area.xml
第二步：创建与xml文件中定义的元素对应的实体类。
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; }
}
}
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; }
}
}
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)方法。
最终结果如下图：
代码13，31，50行可以优化。
不建议多次修改DOM结构，可以拼接字符串后一次append
数据源是xml，我会用xslt来解析xml直接输出
第一步：准备xml文件，并放置在网站根目录下，名为Area.xml
复制代码 代码如下:
第二步：创建与xml文件中定义的元素对应的实体类。
复制代码 代码如下:
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; }
}
}
复制代码 代码如下:
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; }
}
}
复制代码 代码如下:
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
{
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
{
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
{
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)方法。
最终结果如下图：
代码13，31，50行可以优化。
不建议多次修改DOM结构，可以拼接字符串后一次append
数据源是xml，我会用xslt来解析xml直接输出
上一篇： 关于gulp与semantic-ui
下一篇： Nginx配置Restful风格url