之前有写过是从JavaScript数组里获取省市信息来实现二级联动,但是似乎有很多需求是要从数据库里获取信息,所以就需要根据异步提交,局部刷新的思想来实现来提高用户交互问题

第一种方法是xml方法

1.首先在jsp页面的JavaScript,这段代码是通用的,所以把他放在函数外面,可以供其他的函数共同使用

var xhr=false;
//创建XMLHttpRequst对象
if(window.XMLHttpRequest)
{
xhr=new XMLHttpRequest();
}
else if(window.ActiveXObject)
{
xhr=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
xhr=false;
}

2.获取所选择的省份value值,并将value值通过异步提交传到servlet

//获取城市的信息
function getCity()
{
//省份下拉框的对象
var provinceobj=document.getElementById("province");
//被选择的省份的索引
var index=provinceobj.selectedIndex;
//被选择的省份的value值
var provincevalue=provinceobj[index].value;
//被选择的省份的text值
var province=provinceobj[index].Text;
alert(provincevalue);
var url="<%=basepath%>CityServlet";/* post请求不在url上带参数 */
<%-- var url="<%=basepath%>CityServlet?provincevalue=" provincevalue; --%>//get请求在url上带参数
xhr.open("post",url,true);//设置为post提交方式,true表示为异步提交
//post提交方式的时候需要设置提交的编码
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//当状态改变时,调用callBack_XML来判断是否需要接收数据 
     xhr.onreadystatechange=callBack_XML;//xml方法 
    //通过post提交的时候需要将数据放到send里传到servlet里 
    xhr.send("provincevalue=" provincevalue); 
    //xhr.send(null); 
  }

3.编写回调函数callBack_XML(),此函数判断当服务器响应正常时,接收数据并作出处理

function callBack_XML()//xml方法来获取
{
//城市下拉选择框的对象
var cityobj=document.getElementById("city");
//当请求状态等于4时,相应已完成,可以访问服务器响应并使用它
if(xhr.readyState==4)
{
//当状态为200时意味着,状态正常,未出错
if(xhr.status==200)
{
alert("响应成功");
//获取相应的xml文档
var cityxml=xhr.responseXML;
alert(cityxml);
//获取根元素
var root=cityxml.documentElement;
//获取根元素(city_info)下面的所有city元素
var cities=root.getElementsByTagName("city");
//将下拉框内容清除
cityobj.options.length=1;
for(var i=0;i<cities.length;i  )
{
var city=cities[i];
//获取节点的值
var cid=city.childNodes[0].firstChild.nodeValue;
var cname=city.childNodes[2].firstChild.nodeValue;
//alert(cid " " cname);
//放到下拉选择框里Option(文本内容,value值);
cityobj.options[cityobj.options.length]=new Option(cname,cid);
}
}
//当状态为404时,表示找不到页面
else if(xhr.status==404)
{
alert("Request URL is not exists!");
}
else
{
alert("Error:Status is:" request.status);
}
}
}

4.在servlet页面:

String provincevalue=request.getParameter("provincevalue");
System.out.println("省份编号:" provincevalue);
CityService cityservice=CityService.getCityService();
List<City> citylist=cityservice.getCity(provincevalue);
for(int i=0;i<citylist.size();i  )
{
System.out.println(citylist.get(i));
}
//生成xml页面
StringBuffer xml=new StringBuffer();
xml.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>");
xml.append("<city_info>");
for(City c : citylist)
{
xml.append("<city>");
xml.append("<id>" c.getId() "</id>");
xml.append("<cityid>" c.getCityid() "</cityid>");
xml.append("<cityname>" c.getCity() "</cityname>");
xml.append("<province>" c.getFather() "</province>");
xml.append("</city>");
}
xml.append("</city_info>");
//设置响应字符集编码,防止中文乱码
response.setCharacterEncoding("utf-8");
response.setContentType("text/xml;charset=utf-8");
//将xml文档写出去
PrintWriter writer=response.getWriter();
//因为只能写字符串,所以toString
writer.write(xml.toString());
writer.flush();
writer.close();
}

这样就完成了用xml实现异步提交和局部刷新来实现省市二级联动

下面小编会继续给大家分享使用json来实现的方法,大家继续关注Devmax网站哦~

以上所述是小编给大家介绍的Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法),实现一个模拟后台数据登入的效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对Devmax网站的支持!

Ajax通过XML异步提交的方法实现从数据库获取省份和城市信息实现二级联动(xml方法)的更多相关文章

  1. 详解前端HTML5几种存储方式的总结

    本篇文章主要介绍了前端HTML5几种存储方式的总结 ,主要包括本地存储localstorage,本地存储sessionstorage,离线缓存(application cache),Web SQL,IndexedDB。有兴趣的可以了解一下。

  2. PhoneGap / iOS上的SQLite数据库 – 超过5mb可能

    我误解了什么吗?Phonegap中的sqlitedbs真的有5mb的限制吗?我正在使用Phonegap1.2和iOS5.解决方法您可以使用带有phonegap插件的原生sqliteDB,您将没有任何限制.在iOS5.1中,Websql被认为是可以随时删除的临时数据…

  3. ios – 领域:如何获取数据库的当前大小

    是否有RealmAPI方法使用RealmSwift作为数据存储来获取我的RealmSwift应用程序的当前数据库大小?

  4. ios – Realm – 无法使用现有主键值创建对象

    我有一个对象有许多狗的人.应用程序有单独的页面,它只显示狗和其他页面显示人的狗我的模型如下我有人存储在Realm中.人有详细页面,我们取,并显示他的狗.如果狗已经存在,我会更新该狗的最新信息并将其添加到人的狗列表中,否则创建新狗,保存并将其添加到人员列表中.这适用于coredata.在尝试用他的狗更新人时,领域会抛出异常无法使用现有主键值创建对象解决方法这里的问题是,即使你正在创建一个全新的Rea

  5. ios – UIWebView中的WebSQL / SQLite数据库的最大大小(phonegap)

    我知道一般来说,Web应用程序的本地存储空间有5MB的限制.本地网页浏览应用程式是否也有这个限制?

  6. ios – Firebase离线存储高级 – 手动同步和进度信息

    >我可以提供一个捆绑数据库–安装App后我可以已经离线查询了Firebase数据?然后我有另一个关于Firebase的主要问题:>JSON存储是伟大的–但是这样我们不关心一个独特的结构,我们必须注意这一点插入总是正确的数据集?我从来没有试图显示实际的进展,但是当您从firebase中检索数据时,始终会在成功检索数据时调用onDataChange方法.https://firebase.google.com/docs/database/android/retrieve-data#read_data_onceC

  7. ios – 如何处理多用户数据库

    我的应用程序就像很多应用程序–它有一个用户输入用户名和密码的登录屏幕,以及登录按钮我的应用程序还使用CoreData来保存大多数用户的业务对象,当然也是用户特定的.我也有一个登出按钮来启用切换用户.这不会发生很多,但仍然是必要的).现在如果不同的用户登录,我需要获取他的具体数据.但是我该如何做呢?

  8. ios – Swift从Firebase数据库中获取特定价值

    我正在尝试从Firebase数据库中获取特定值.我看了一些像谷歌这样的文件,但我做不到.这是数据库的JSON文件:SWIFT代码:我想获得用户的电子邮件价值,而不是每个人.我怎样才能做到这一点?解决方法在您的代码中,快照将包含子值的字典.要访问它们,请将snapshot.value转换为Dictionary,然后访问各个子项是一个快照

  9. ios – Realm Swift:在卸载应用程序后是否可以保留数据库?

    使用realmswift,即使从设备上卸载应用程序,是否可以在设备内存中保留和维护应用程序的领域数据库文件?非常感谢您的帮助.解决方法删除应用程序时,应用程序的所有文件都是剩余的.iOS应用程序是沙盒.这意味着每个应用程序在磁盘中都有自己的空间,并有自己的目录,这些目录充当应用程序及其数据的主页.从iPhone删除应用程序会删除此沙箱,删除与该应用程序关联的所有数据.

  10. ios – 在没有XML的情况下更新sqlite数据库

    我的应用程序需要来自sqlite数据库的数据.它将附带此数据库的一个版本,但我需要定期更新它(很可能每月一次).通常情况下,我一直在通过我设置的一堆网络服务将我的应用程序的其他部分的更新作为XML发送,但我现在正在处理的这个特定数据库非常大(大约20-30MB),而且我当我尝试以这种方式发送时出现超时错误.我尝试将数据库放在我的公司服务器上,然后将其下载到NSData对象中.然后我将该数据对象保存

随机推荐

  1. js中‘!.’是什么意思

  2. Vue如何指定不编译的文件夹和favicon.ico

    这篇文章主要介绍了Vue如何指定不编译的文件夹和favicon.ico,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

  3. 基于JavaScript编写一个图片转PDF转换器

    本文为大家介绍了一个简单的 JavaScript 项目,可以将图片转换为 PDF 文件。你可以从本地选择任何一张图片,只需点击一下即可将其转换为 PDF 文件,感兴趣的可以动手尝试一下

  4. jquery点赞功能实现代码 点个赞吧!

    点赞功能很多地方都会出现,如何实现爱心点赞功能,这篇文章主要为大家详细介绍了jquery点赞功能实现代码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  5. AngularJs上传前预览图片的实例代码

    使用AngularJs进行开发,在项目中,经常会遇到上传图片后,需在一旁预览图片内容,怎么实现这样的功能呢?今天小编给大家分享AugularJs上传前预览图片的实现代码,需要的朋友参考下吧

  6. JavaScript面向对象编程入门教程

    这篇文章主要介绍了JavaScript面向对象编程的相关概念,例如类、对象、属性、方法等面向对象的术语,并以实例讲解各种术语的使用,非常好的一篇面向对象入门教程,其它语言也可以参考哦

  7. jQuery中的通配符选择器使用总结

    通配符在控制input标签时相当好用,这里简单进行了jQuery中的通配符选择器使用总结,需要的朋友可以参考下

  8. javascript 动态调整图片尺寸实现代码

    在自己的网站上更新文章时一个比较常见的问题是:文章插图太宽,使整个网页都变形了。如果对每个插图都先进行缩放再插入的话,太麻烦了。

  9. jquery ajaxfileupload异步上传插件

    这篇文章主要为大家详细介绍了jquery ajaxfileupload异步上传插件,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  10. React学习之受控组件与数据共享实例分析

    这篇文章主要介绍了React学习之受控组件与数据共享,结合实例形式分析了React受控组件与组件间数据共享相关原理与使用技巧,需要的朋友可以参考下

返回
顶部