您好,欢迎访问一九零五行业门户网

Ajax & PHP 边学边练 之二 实例_PHP教程

本篇通过一个实例介绍ajax与php结合使用的方式,可以下载该实例的源程序以便更好理解。压缩包中functions.js就是ajax核心代码了,所有的操作效果都是通过它来实现的。下文的代码解释都是提取自functions.js。
效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:
copy to clipboard引用的内容:[www.bkjia.com]function checkfortasks (thedate, e){
//找到页面中taskbox对应设置为可见
theobject = document.getelementbyid(taskbox);
theobject.style.visibility = visible;
//初始化taskbox位置
var posx = 0;
var posy = 0;
//定位taskbox位置为鼠标位置
posx = e.clientx + document.body.scrollleft;
posy = e.clienty + document.body.scrolltop;
theobject.style.left = posx + px;
theobject.style.top = posy + px;
//设置php请求页面
serverpage = taskchecker.php?thedate= + thedate;
//设置php返回数据替换位置
objid = taskbox;
var obj = document.getelementbyid(objid);
//发送请求并加载返回数据
xmlhttp.open(get, serverpage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readystate == 4 && xmlhttp.status == 200){
obj.innerhtml = xmlhttp.responsetext;
}
}
xmlhttp.send(null);
} 效果2. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:
copy to clipboard引用的内容:[www.bkjia.com]function autocomplete (thevalue, e){
//定位页面中autocompletediv(显示检索姓名的标签)的位置
theobject = document.getelementbyid(autocompletediv);
//设置为可见
theobject.style.visibility = visible;
theobject.style.width = 152px;
//设置检索标签位置
var posx = 0;
var posy = 0;
posx = (findposx (document.getelementbyid(yourname)) + 1);
posy = (findposy (document.getelementbyid(yourname)) + 23);
theobject.style.left = posx + px;
theobject.style.top = posy + px;
//设定事件为键盘录入
var theextrachar = e.which;
if (theextrachar == undefined){
theextrachar = e.keycode;
}
//设定加载检索名单位置
var objid = autocompletediv;
//设定php请求页面,并将用户输入的姓名传值过去(同时考虑到backspace作用)
if (theextrachar == 8){
if (thevalue.length == 1){
var serverpage = autocomp.php;
}
else{
var serverpage = autocomp.php + ?sstring= + thevalue.substr(0, (thevalue.length -1));
}
}
else{
var serverpage = autocomp.php + ?sstring= + thevalue + string.fromcharcode(theextrachar);
}
//发送请求并加载返回数据
var obj = document.getelementbyid(objid);
xmlhttp.open(get, serverpage);
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readystate == 4 && xmlhttp.status == 200) {
obj.innerhtml = xmlhttp.responsetext;
}
}
xmlhttp.send(null);
}源代码下载:sample3.rar
http://www.bkjia.com/phpjc/364430.htmlwww.bkjia.comtruehttp://www.bkjia.com/phpjc/364430.htmltecharticle本篇通过一个实例介绍ajax与php结合使用的方式,可以下载该实例的源程序以便更好理解。压缩包中functions.js就是ajax核心代码了,所有的操...
其它类似信息

推荐信息