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个人网站架设连环讲(三)
Oct 09 PHP
PHP文章按日期(月日)SQL归档语句
Nov 29 PHP
php笔记之:php数组相关函数的使用
Apr 26 PHP
PHP 字符串长度判断效率更高的方法
Mar 02 PHP
php中字符串和正则表达式详解
Oct 23 PHP
memcache一致性hash的php实现方法
Mar 05 PHP
php中关于socket的系列函数总结
May 18 PHP
Yii2实现多域名跨域同步登录退出
Feb 04 PHP
Laravel中的chunk组块结果集处理与注意问题
Aug 15 PHP
启用OPCache提高PHP程序性能的方法
Mar 21 PHP
PHP正则之正向预查与反向预查讲解与实例
Apr 06 PHP
php访问对象中的成员的实例方法
Nov 17 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
在mysql数据库原有字段后增加新内容
2009/11/26 PHP
PHP is_dir() 判断给定文件名是否是一个目录
2010/05/10 PHP
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
Discuz批量替换帖子内容的方法(使用SQL更新数据库)
2014/06/23 PHP
PHP+jQuery+Ajax实现用户登录与退出
2015/04/27 PHP
PHP fopen函数用法实例讲解
2019/02/15 PHP
js 替换
2008/02/19 Javascript
javascript 获取图片尺寸及放大图片
2013/09/04 Javascript
javascript实现分栏显示小技巧附图
2014/10/13 Javascript
JavaScript实现在页面间传值的方法
2015/04/07 Javascript
利用jQuery及AJAX技术定时更新GridView的某一列数据
2015/12/04 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
JavaScript之生成器_动力节点Java学院整理
2017/06/30 Javascript
JS实现微信摇一摇原理解析
2017/07/22 Javascript
swiper动态改变滑动内容的实现方法
2018/01/17 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
nodejs中用npm初始化来创建package.json的实例讲解
2018/10/10 NodeJs
30分钟精通React今年最劲爆的新特性——React Hooks
2019/03/11 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
微信小程序实现比较功能的方法汇总(五种方法)
2020/03/07 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
Python基础之循环语句用法示例【for、while循环】
2019/03/23 Python
Python中将两个或多个list合成一个list的方法小结
2019/05/12 Python
Python自定义sorted排序实现方法详解
2020/09/18 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
使用phonegap操作数据库的实现方法
2017/03/31 HTML / CSS
银行实习人员自我鉴定
2013/09/22 职场文书
学期自我鉴定范文
2013/10/01 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
学校党的群众路线教育实践活动领导班子对照检查材料
2014/09/25 职场文书
小学生表扬稿范文
2015/05/05 职场文书
农贸批发市场管理制度
2015/08/07 职场文书
SQL之各种join小结详细讲解
2021/08/04 MySQL
一篇文章搞懂python混乱的切换操作与优雅的推导式
2021/08/23 Python