仓酷云

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 1327|回复: 20
打印 上一主题 下一主题

[学习教程] PHP编程:Prototype Ajax读取XML文档完成联动下拉...

[复制链接]
蒙在股里 该用户已被删除
跳转到指定楼层
楼主
发表于 2015-2-3 23:36:13 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
我的这套线路可能跟许多学习PHP的爱好者不谋而合,这也算是一个循序渐进的学习过程,不过新手不要看到上面的概括就以为学习蛮简单的,默默在此不得不对您稍微泼一下冷水,任何东西其实都不简单。     在利用PHP停止WEB2.0网站开辟时,经常需求用到Ajax手艺来增添用户体验,以后对照盛行的Ajax开辟框架有Prototype,Jquery,Lightbox等,明天和人人分享若何使用Prototype和XML文档停止交互以完成Ajax联动下拉菜单的例子。
  Ajax(Asynchronous JavaScript and XML)利用XHTML和CSS尺度化出现,利用DOM完成静态显示和交互,利用XML和XSTL停止数据互换与处置,利用XMLHttpRequest对象停止异步数据读取,利用Javascript绑定和处置一切数据。

Ajax实例(example)申明
  次要功效:经由过程Prototype解析xml内容,完成省分和城市之间的二级联动,依此类推,也能够延长至三级,四级联动
筹办任务
  下载Prototype,并放至相干开辟目次,实例中放至在js目次下,以后Prototype最新版本为1.6,下载地址为:http://www.prototypejs.org/download
  创立省分和城市的相干数据库
  新建Form表单,并创立两个Select框,此处省分Select框定名为ProvinceList,城市Select框定名为CityList
代码实例
1
<script src="js/prototype.js"></script> 正文:引入prototype.js文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script>
var targetSelect;

function getCity&#40;select,target,http&#41;
{               
     targetSelect = target;
     
     var url = http + "?timeStamp=" + new Date&#40;&#41;.getTime&#40;&#41; + "&";
     var pars = 'province_id='+select.options&#91;select.selectedIndex&#93;.value;

   var myAjax =new Ajax.Request&#40;
         url,
         {method:'get',parameters:pars,onComplete:showDestObj}
         &#41;;      
     }

function showDestObj&#40;originalRequest&#41;
{
     var obj = originalRequest.responseXML;
     var properties = obj.getElementsByTagName&#40;"property"&#41;;
   var name,value;
     targetSelect.options.length =properties.length+1;
     removeAllOpt&#40;targetSelect&#41;;

     if&#40;targetSelect.options.length >= 0&#41; {
       targetSelect.options&#91;0&#93; = new Option&#40;&#41;;
     targetSelect.options&#91;0&#93;.value = "0";
     targetSelect.options&#91;0&#93;.text = "请选择";
     }

     for &#40;var i=0,x=1;i<properties.length;i++,x++&#41;
     {
     name = properties&#91;i&#93;.getElementsByTagName&#40;"name"&#41;&#91;0&#93;.firstChild.nodeValue;
     value = properties&#91;i&#93;.getElementsByTagName&#40;"value"&#41;&#91;0&#93;.firstChild.nodeValue;
     targetSelect.options&#91;x&#93; = new Option&#40;&#41;;
     targetSelect.options&#91;x&#93;.value = value;
     targetSelect.options&#91;x&#93;.text = name;
     }
}
     
function removeAllOpt&#40;sel&#41; {
     var arr = sel.options;      
     for&#40;var i=0; i<arr.length; i++&#41; {
         sel.remove&#40;i&#41;;
     }
}
</script> 正文
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格局为:
1
2
3
4
5
6
7
8
9
10
11
12
<?xml version="1.0" encoding="GB2312"?>
<properties>
<property>
<value>城市ID</value>
<name>城市称号</name>
</property>

<property>
<value>城市ID</value>
<name>城市称号</name>
</property>
</properties> 第23行:removeAllOpt函数用来每次处置前往内容时清空方针select框
第25~38行:将Prototype解析XML后的内容付与方针select框,以便在页面上显示。
挪用办法
1
<select name="provinceList" onChange="getCity(this,form1.cityList,'../ajax/province.php')"> 总结
  以上就是在利用PHP停止WEB2.0网站开辟时,若何使用Prototype读取XML文档完成二级联动下拉框的Ajax实例,是一个对照复杂入门的实例,更庞杂的使用你可以去Prototype的官网检查详细匡助文档,网址为:http://www.prototypejs.org/learn,下次分享若何使用Jquery来完成上述功效。
  :PHP网站开辟教程-leapsoul.cn版权一切,转载时请以链接模式注明原始出处及本声明,感谢。
多去关于PHP的网站,尤其有很多经典的文章,多读读这些文章显然是有好处的。
金色的骷髅 该用户已被删除
沙发
发表于 2015-2-4 03:30:06 | 只看该作者
本文当是我的笔记啦,遇到的问题随时填充
柔情似水 该用户已被删除
板凳
发表于 2015-2-7 01:36:11 | 只看该作者
没接触过框架的人,也不用害怕,其实框架就是一种命名规范及插件,学会一个框架其余的框架都很好上手的。
再现理想 该用户已被删除
地板
发表于 2015-2-14 06:26:41 | 只看该作者
刚开始安装php的时候,我图了个省事,把php的扩展全都打开啦(就是把php.ini 那一片 extension 前面的冒号全去掉啦),这样自然有好处,以后不用再需要什么功能再来打开。
分手快乐 该用户已被删除
5#
发表于 2015-3-1 15:47:51 | 只看该作者
这些中手常用的知识,当你把我说的这些关键字都可以熟练运用的时候,你可以选择自己
冷月葬花魂 该用户已被删除
6#
发表于 2015-3-10 19:35:46 | 只看该作者
如果你已经到这种程度了,那么你已经可以做我的老师了。其实php也分很多的区域,
谁可相欹 该用户已被删除
7#
发表于 2015-3-17 09:10:49 | 只看该作者
学好程序语言,多些才是王道,写两个小时代码的作用绝对超过看一天书,这个我是深有体会(顺便还能练打字速度)。
再见西城 该用户已被删除
8#
发表于 2015-3-19 18:56:29 | 只看该作者
建议加几个专业的phper的群,当然啦需要说话的人多,一处一点问题能有人回答你的,当然啦要让人回答你的问题,平时就得躲在里面聊天,大家混熟啦,愿意回答你问题的人自然就多啦。
不帅 该用户已被删除
9#
发表于 2015-3-20 23:58:45 | 只看该作者
多看优秀程序员编写的代码,仔细理解他们解决问题的方法,对自身有很大的帮助。
海妖 该用户已被删除
10#
发表于 2015-3-26 01:46:12 | 只看该作者
环境搭建好,当你看见你的浏览器输出“it works\\\\\\\"时你一定是喜悦的。在你解决问题的时候,我强烈建议多读php手册。
若天明 该用户已被删除
11#
发表于 2015-3-29 16:47:48 | 只看该作者
为了以后维护的方便最好是代码上都加上注释,“予人方便,自己方便”。此外开发文档什么的最好都弄齐全。我觉得这是程序员必备的素质。虽然会消耗点很多的时间。但是确实是非常有必要的。
12#
发表于 2015-4-3 02:45:05 | 只看该作者
说点我烦的低级错误吧,曾经有次插入mysql的时间 弄了300年结果老报错,其实mysql的时间是有限制的,大概是到203X年  具体的记不清啦,囧。
愤怒的大鸟 该用户已被删除
13#
发表于 2015-4-4 08:48:24 | 只看该作者
学好程序语言,多些才是王道,写两个小时代码的作用绝对超过看一天书,这个我是深有体会(顺便还能练打字速度)。
灵魂腐蚀 该用户已被删除
14#
发表于 2015-4-5 22:09:33 | 只看该作者
爱上php,他也会爱上你。
小妖女 该用户已被删除
15#
发表于 2015-4-13 00:38:23 | 只看该作者
最后祝愿,php会给你带来快乐的同时 你也会给他带来快乐。
山那边是海 该用户已被删除
16#
发表于 2015-4-14 18:47:46 | 只看该作者
当然这种网站的会员费就几十块钱。
乐观 该用户已被删除
17#
发表于 2015-4-16 18:09:21 | 只看该作者
真正的方向了,如果将来要去开发团队,你一定要学好smarty ,phplib这样的模板引擎,
只想知道 该用户已被删除
18#
发表于 2015-4-17 00:56:55 | 只看该作者
刚开始安装php的时候,我图了个省事,把php的扩展全都打开啦(就是把php.ini 那一片 extension 前面的冒号全去掉啦),这样自然有好处,以后不用再需要什么功能再来打开。
深爱那片海 该用户已被删除
19#
发表于 2015-4-21 08:05:46 | 只看该作者
真正的方向了,如果将来要去开发团队,你一定要学好smarty ,phplib这样的模板引擎,
简单生活 该用户已被删除
20#
发表于 2015-5-12 11:34:49 | 只看该作者
说点我烦的低级错误吧,曾经有次插入mysql的时间 弄了300年结果老报错,其实mysql的时间是有限制的,大概是到203X年  具体的记不清啦,囧。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|仓酷云 鄂ICP备14007578号-2

GMT+8, 2024-11-14 13:58

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表