版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Cheng_May/article/details/82630088
今天学习了一下ajax以及xml的用法并且实现了一个二级联动的小功能,因为楼主比较懒,将其放于博客方便查阅并希望能帮助其他人!
小案例:省市联动
代码:ajax代码
省部分:
<script type="text/javascript">
var xmlDoc;
window.onload=function(){
// 发出异步请求
var xhr = getXHR();
xhr.onreadystatechange= function(){
if(xhr.readyState==4){
if(xhr.status==200){
xmlDoc = xhr.responseXML;
// 给省份赋值:XML DOM和HTML DOM解析的问题
// --------------------------
//1.解析XML文档,得到所有的province元素
var xmlProvinces = xmlDoc.getElementsByTagName("province");
// 2.遍历province元素,得到他的属性code和name的值
for(var i = 0;i<xmlProvinces.length;i++){
var codeValue = xmlProvinces[i].getAttribute("code");
var nameValue = xmlProvinces[i].getAttribute("name");
//alert(codeValue+":"+nameValue);
// 3 . 创建HTML中的option对象,给id=p1的元素添加子元素
var o = new Option(nameValue,codeValue);
document.getElementById("p1").add(o);
}
}
}
}
xhr.open("GET","${pageContext.request.contextPath}/servletDemo4?time="+new Date().getTime());
xhr.send(null);
}
省的变化引起城市的变化:
// 省份的变化,引起城市的变化
function selectCity(provinceObj){
// 取到当前的选项的值
var selectValue = provinceObj.value;
if(selectValue==""){
// 清楚城市下拉内容
document.getElementById("c1").length = 1;
}else{
// 遍历xml文档中的省份元素,比对code的值
var xmlProvinces = xmlDoc.getElementsByTagName("province");
for(var i = 0; i<xmlProvinces.length;i++){
// 找到了:把他的子元素city取出来
if(selectValue == xmlProvinces[i].getAttribute("code")){
var xmlCitys = xmlProvinces[i].getElementsByTagName("city");
// 给HTML中的city下拉选择添加option
for(var j=0;j<xmlCitys.length;j++){
var o = new Option(xmlCitys[j].getAttribute("name"),xmlCitys[j].getAttribute("code"));
document.getElementById("c1").add(o);
}
}
}
}
}
</script>
下面是
servlet中的代码
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
List<Province> provinces = new ArrayList<Province>();
Province sd = new Province(37, "山东省");
Province hb = new Province(42, "湖北省");
Province hn = new Province(41, "河南省");
sd.getCitys().add(new City(01, "济南市"));
sd.getCitys().add(new City(02, "青岛市"));
sd.getCitys().add(new City(03, "淄博市"));
hb.getCitys().add(new City(01, "武汉市"));
hb.getCitys().add(new City(02, "黄冈市"));
hb.getCitys().add(new City(03, "襄阳市"));
hn.getCitys().add(new City(01, "郑州市"));
hn.getCitys().add(new City(02, "开封市"));
hn.getCitys().add(new City(03, "洛阳市"));
provinces.add(sd);
provinces.add(hb);
provinces.add(hn);
XStream xs = new XStream();
xs.autodetectAnnotations(true);//使用注解生成别名
xs.alias("provinces", List.class);
String xml = xs.toXML(provinces);
//输出xml文件
response.setContentType("text/xml;charset=UTF-8");
response.getWriter().write(xml);
}
还需要两个工具类:
<provinces>
<province code="37" name="山东省">
<city code="1" name="济南市"/>
<city code="2" name="青岛市"/>
<city code="3" name="淄博市"/>
</province>
<province code="42" name="湖北省">
<city code="1" name="武汉市"/>
<city code="2" name="黄冈市"/>
<city code="3" name="襄阳市"/>
</province>
<province code="41" name="河南省">
<city code="1" name="郑州市"/>
<city code="2" name="开封市"/>
<city code="3" name="洛阳市"/>
</province>
</provinces>
Province 类:
@XStreamAlias("province")
public class Province {
@XStreamAsAttribute
private int code; // 10 37 42
@XStreamAsAttribute
private String name;
@XStreamImplicit(itemFieldName="city")
private List<City> citys = new ArrayList<City>();
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public List<City> getCitys() {
return citys;
}
public void setCitys(List<City> citys) {
this.citys = citys;
}
@Override
public String toString() {
return "Province [code=" + code + ", name=" + name + ", citys=" + citys + "]";
}
public Province(int code, String name) {
super();
this.code = code;
this.name = name;
}
public Province() {
super();
// TODO Auto-generated constructor stub
}
}
City 类
@XStreamAlias("city")
public class City {
@XStreamAsAttribute
private int code;
@XStreamAsAttribute
private String name;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public City(int code, String name) {
super();
this.code = code;
this.name = name;
}
public City() {
super();
// TODO Auto-generated constructor stub
}
}
这种方式比较复杂,所以了解一下就可以。