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 相关文章推荐
从零开始 教你如何搭建Discuz!4.1论坛
Jul 07 PHP
如何对PHP程序中的常见漏洞进行攻击(上)
Oct 09 PHP
PHP动态变静态原理
Nov 25 PHP
用php将任何格式视频转为flv的代码
Sep 03 PHP
php学习笔记(三)操作符与控制结构
Aug 06 PHP
PHP IF ELSE简化/三元一次式的使用
Aug 22 PHP
PHP中substr()与explode()函数用法分析
Nov 24 PHP
php下pdo的mysql事务处理用法实例
Dec 27 PHP
php实现将上传word文件转为html的方法
Jun 03 PHP
使用PHP实现下载CSS文件中的图片
Dec 06 PHP
初识PHP中的Swoole
Apr 05 PHP
php入门教程之Zend Studio设置与开发实例
Sep 09 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
PHP数组编码gbk与utf8互相转换的两种方法
2016/09/01 PHP
PHP数组中头部和尾部添加元素的方法(array_unshift,array_push)
2017/04/10 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
用JQuery在网页中实现分隔条功能的代码
2012/08/09 Javascript
基于jquery库的tab新形式使用
2012/11/16 Javascript
IE浏览器IFrame对象内存不释放问题解决方法
2014/08/22 Javascript
Js实现无刷新删除内容
2015/04/29 Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
2015/05/13 Javascript
javascript中substring()、substr()、slice()的区别
2015/08/30 Javascript
移动端滑动插件Swipe教程
2016/10/16 Javascript
利用JS制作万年历的方法
2017/08/16 Javascript
详解node服务器中打开html文件的两种方法
2017/09/18 Javascript
AngularJS监听ng-repeat渲染完成的两种方法
2018/01/16 Javascript
VUE组件中的 Drawer 抽屉实现代码
2019/08/06 Javascript
利用d3.js制作连线动画图与编辑器的方法实例
2019/09/05 Javascript
node.js中事件触发器events的使用方法实例分析
2019/11/23 Javascript
[02:26]2018DOTA2亚洲邀请赛赛前采访-Newbee篇
2018/04/03 DOTA
使用Python编写Linux系统守护进程实例
2015/02/03 Python
Python+tkinter使用80行代码实现一个计算器实例
2018/01/16 Python
python粘包问题及socket套接字编程详解
2019/06/29 Python
python 进程 进程池 进程间通信实现解析
2019/08/23 Python
利用rest framework搭建Django API过程解析
2019/08/31 Python
详解Python time库的使用
2019/10/10 Python
打包PyQt5应用时的注意事项
2020/02/14 Python
python能开发游戏吗
2020/06/11 Python
Python闭包装饰器使用方法汇总
2020/06/29 Python
印刷工程专业应届生求职信
2013/09/29 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
开业庆典策划方案
2014/02/18 职场文书
聘用意向书
2014/07/29 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
小学运动会宣传稿
2015/07/23 职场文书
2016年领导干部廉政承诺书
2016/03/24 职场文书
CentOS安装Nginx并部署vue
2022/04/12 Servers