700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > Prototype Ajax读取XML文档实现联动下拉框实例

Prototype Ajax读取XML文档实现联动下拉框实例

时间:2022-09-25 02:02:46

相关推荐

Prototype Ajax读取XML文档实现联动下拉框实例

php教程|php手册

nbsp,quot,targetSelect,Prototype,Select

php教程-php手册

在使用PHP进行WEB2.0网站开发时,时常需要用到Ajax技术来增加用户体验,当前比较流行的Ajax开发框架有Prototype,Jquery,Lightbox等,今天和大家分享如何利用Prototype和XML文档进行交互以实现Ajax联动下拉菜单的例子。

android 人脸锁屏源码,vscode文件名绿色U,ubuntu怎样联网,泰国男模tomcat资料,搭建python 爬虫,秦皇岛php招聘,seo效果和网站有关系吗,aspcms网站lzw

Ajax(Asynchronous JavaScript and XML)使用XHTML和CSS标准化呈现,使用DOM实现动态显示和交互,使用XML和XSTL进行数据交换与处理,使用XMLHttpRequest对象进行异步数据读取,使用Javascript绑定和处理所有数据。

在线调查网站源码,用的ubuntu系统,爬虫获取数据方法,php扩,淮南网站seolzw

Ajax实例(example)说明

网页源码 患者管理系统,vscode安装包,ubuntu关闭nfs,tomcat多个cpu,sqlite 数据库导入,发表评论插件,前端框架怎样调用后端接口,爬虫能做到多少岁,php文件操作文件,舟山正规seo推广, 电子商务网站源码,网页制作中模板的概念,dt网站模板lzw

主要功能:通过Prototype解析xml内容,实现省份和城市之间的二级联动,依此类推,也可以延伸至三级,四级联动

准备工作

下载Prototype,并放至相关开发目录,实例中放至在js目录下,当前Prototype最新版本为1.6,下载地址为:/download

建立省份和城市的相关数据库

新建Form表单,并建立两个Select框,此处省份Select框命名为ProvinceList,城市Select框命名为CityList

代码实例

注释:引入prototype.js文件

注释:

targetSelect:全局变量,存储目标下拉框,也就是cityList

getCity函数用来获取某个省份的所有城市,启动Ajax,传递必要的参数。select参数代表源操作select框,即provinceList,target参数代表最终实现自动刷新的select框,即cityList,http参数代表提交至后台处理的PHP执行文件。

第8行:加入timeStamp=” + new Date().getTime()的原因是为了防止返回内容无法交互显示,即无法刷新。

第13行:Ajax Form提交有两种方式:get和post,和一般情况下的表单提交后PHP进行处理方式的方式是一样的。

特别注意:由于Prototype get出去的内容编码是UTF8的,如果和数据库或者页面的编码不符,会导致出现中文乱码问题,需要使用相关的编码转换函数进行编码转换,如果你的运行环境支持iconv函数,你也可以使用iconv函数进行编码转换。

showDestObj函数用来处理返回的内容,并通过DOM操作实现无刷新页面内容显示。一般情况下返回的内容格式有两种,一种是text格式,一种是xml格式,此处我们返回的内容格式是xml格式的,所以使用了responseXML,如果是text格式,请使用responseText。

第20行:获取指定标签名对象的集合,getElementsByTagName() 函数用来返回带有指定标签名的对象的集合。后台生成的XML文档循环生成某个省份下城市的相关信息,XML格式为:

第23行:removeAllOpt函数用来每次处理返回内容时清空目标select框

第25~38行:将Prototype解析XML后的内容赋予目标select框,以便在页面上显示。

调用方法:

总结:

以上就是在使用PHP进行WEB2.0网站开发时,如何利用Prototype读取XML文档实现二级联动下拉框的Ajax实例,是一个比较简单入门的实例,更复杂的应用你可以去Prototype的官网查看具体帮助文档,网址为:/learn,下次分享如何利用Jquery来实现上述功能。

注:PHP网站开发教学-版权所有,转载时请以链接形式注明原始出处及本声明,谢谢。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。