|
马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。
您需要 登录 才可以下载或查看,没有帐号?立即注册
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(select,target,http)
{
targetSelect = target;
var url = http + "?timeStamp=" + new Date().getTime() + "&";
var pars = 'province_id='+select.options[select.selectedIndex].value;
var myAjax =new Ajax.Request(
url,
{method:'get',parameters:pars,onComplete:showDestObj}
);
}
function showDestObj(originalRequest)
{
var obj = originalRequest.responseXML;
var properties = obj.getElementsByTagName("property");
var name,value;
targetSelect.options.length =properties.length+1;
removeAllOpt(targetSelect);
if(targetSelect.options.length >= 0) {
targetSelect.options[0] = new Option();
targetSelect.options[0].value = "0";
targetSelect.options[0].text = "请选择";
}
for (var i=0,x=1;i<properties.length;i++,x++)
{
name = properties[i].getElementsByTagName("name")[0].firstChild.nodeValue;
value = properties[i].getElementsByTagName("value")[0].firstChild.nodeValue;
targetSelect.options[x] = new Option();
targetSelect.options[x].value = value;
targetSelect.options[x].text = name;
}
}
function removeAllOpt(sel) {
var arr = sel.options;
for(var i=0; i<arr.length; i++) {
sel.remove(i);
}
}
</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的网站,尤其有很多经典的文章,多读读这些文章显然是有好处的。 |
|