Ajax+PHP 边学边练 之二 实例


Posted in PHP onNovember 24, 2009

效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:
Ajax+PHP 边学边练 之二 实例

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. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:
Ajax+PHP 边学边练 之二 实例
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); 
}

文件打包下载
PHP 相关文章推荐
用PHP读取flv文件的播放时间长度
Sep 03 PHP
php摘要生成函数(无乱码)
Feb 04 PHP
解析如何屏蔽php中的phpinfo()函数
Jun 06 PHP
浅析ThinkPHP中的pathinfo模式和URL重写
Jan 06 PHP
PHP命令行脚本接收传入参数的三种方式
Aug 20 PHP
一个非常完美的读写ini格式的PHP配置类分享
Feb 12 PHP
fsockopen pfsockopen函数被禁用,SMTP发送邮件不正常的解决方法
Sep 20 PHP
php的debug相关函数用法示例
Jul 11 PHP
yii的入口文件index.php中为什么会有这两句
Aug 04 PHP
php获取今日开始时间和结束时间的方法
Feb 27 PHP
PHP给源代码加密的几种方法汇总(推荐)
Feb 06 PHP
PHP利用缓存处理用户注册时的邮箱验证,成功后用户数据存入数据库操作示例
Dec 31 PHP
MYSQL 小技巧 -- LAST_INSERT_ID
Nov 24 #PHP
php Memcache 中实现消息队列
Nov 24 #PHP
phplock(php进程锁) v1.0 beta1
Nov 24 #PHP
PHP 进程锁定问题分析研究
Nov 24 #PHP
PHP 递归效率分析
Nov 24 #PHP
PHP 单引号与双引号的区别
Nov 24 #PHP
PHP小程序自动提交到自助友情连接
Nov 24 #PHP
You might like
php4的session功能评述(三)
2006/10/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
js查找某元素中的所有图片地址的方法
2014/01/16 Javascript
js跳转页面方法实现汇总
2014/02/11 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
Jquery validation remote 验证的缓存问题解决方法
2014/03/25 Javascript
jQuery实现倒计时按钮功能代码分享
2014/09/03 Javascript
js实现键盘上下左右键选择文字并显示在文本框的方法
2015/05/07 Javascript
angular.js分页代码的实例
2016/07/27 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
nodejs中sleep功能实现暂停几秒的方法
2017/07/12 NodeJs
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
Vue一个案例引发的递归组件的使用详解
2018/11/15 Javascript
利用jsonp解决js读取本地json跨域的问题
2018/12/11 Javascript
vue组件数据传递、父子组件数据获取,slot,router路由功能示例
2019/03/19 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
详解express使用vue-router的history踩坑
2019/06/05 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
[01:12:44]VG vs Mineski Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
[01:34:42]NAVI vs EG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
用 Python 连接 MySQL 的几种方式详解
2018/04/04 Python
如何通过50行Python代码获取公众号全部文章
2019/07/12 Python
pandas-resample按时间聚合实例
2019/12/27 Python
html5唤醒APP小记
2019/03/27 HTML / CSS
Ann Taylor官方网站:美国最大的女性产品制造商之一
2016/09/14 全球购物
美国高端婴童品牌:Hanna Andersson
2016/10/30 全球购物
师范院校学生自荐信范文
2013/12/27 职场文书
小学运动会入场式解说词
2014/02/18 职场文书
促销活动总结报告
2014/04/26 职场文书
卫校毕业生自我鉴定
2014/09/28 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
小学五一劳动节活动总结
2015/02/09 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书
导游词之无锡梅园
2019/11/28 职场文书
SQL实现LeetCode(175.联合两表)
2021/08/04 MySQL