Ajax+PHP 边学边练 之二 实例_php技巧

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

 <BR>function checkfortasks (thedate, e){ <BR>//找到页面中taskbox对应<div>设置为可见 <BR>theObject = document.getElementById("taskbox"); <BR><p>4本文￥来源gao!%daima.com搞$代*!码$网9</p><pre>搞代gaodaima码

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. 当鼠标点击某日录入姓名时，系统会自动检索姓名是否存在，并可以通过选择填入姓名框中，如图：

 <BR>function autocomplete (thevalue, e){ <BR>//定位页面中autocompletediv（显示检索姓名的标签）的<div>位置 <BR>theObject = document.getElementById("autocompletediv"); <BR>//设置为可见 <BR>theObject.style.visibility = "visible"; <BR>theObject.style.width = "152px"; <BR>//设置检索标签位置 <BR>var posx = 0; <BR>var posy = 0; <br><br>posx = (findPosX (document.getElementById("yourname")) + 1); <BR>posy = (findPosY (document.getElementById("yourname")) + 23); <br><br>theObject.style.left = posx + "px"; <BR>theObject.style.top = posy + "px"; <BR>//设定事件为键盘录入 <BR>var theextrachar = e.which; <br><br>if (theextrachar == undefined){ <BR>theextrachar = e.keyCode; <BR>} <BR>//设定加载检索名单位置 <BR>var objID = "autocompletediv"; <br><br>//设定PHP请求页面，并将用户输入的姓名传值过去（同时考虑到Backspace作用） <BR>if (theextrachar == 8){ <BR>if (thevalue.length == 1){ <BR>    var serverPage = "autocomp.php"; <BR>} <BR>else{ <BR>    var serverPage = "autocomp.php" + "?sstring=" + thevalue.substr(0, (thevalue.length -1)); <BR>} <BR>} <BR>else{ <BR>var serverPage = "autocomp.php" + "?sstring=" + thevalue + String.fromCharCode(theextrachar); <BR>} <BR>//发送请求并加载返回数据 <BR>var obj = document.getElementById(objID); <BR>xmlhttp.open("GET", serverPage); <BR>xmlhttp.onreadystatechange = function() { <BR>if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { <BR>    obj.innerHTML = xmlhttp.responseText; <BR>} <BR>} <BR>xmlhttp.send(null); <BR>} <BR>

文件打包下载

喜欢 (0)赏

[搞代码]

分享 (0)