当前位置:首页 > PHP教程 > PHP高级教程

Ajax+PHP 边学边练 之二 实例

效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:

复制代码 代码如下:

function checkfortasks (thedate, e){
//找到页面中taskbox对应<div>设置为可见
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. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:

复制代码 代码如下:

function autocomplete (thevalue, e){
//定位页面中autocompletediv(显示检索姓名的标签)的<div>位置
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);
}

文件打包下载

【说明】本文章由站长整理发布,文章内容不代表本站观点,如文中有侵权行为,请与本站客服联系(QQ:)!