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下实现一个阿拉伯数字转中文数字的函数
Jul 10 PHP
php下intval()和(int)转换使用与区别
Jul 18 PHP
php数组函数序列之rsort() - 对数组的元素值进行降序排序
Nov 02 PHP
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
May 04 PHP
php读取3389的脚本
May 06 PHP
PHP date()函数警告: It is not safe to rely on the system解决方法
Aug 20 PHP
php中字符集转换iconv函数使用总结
Oct 11 PHP
浅谈php自定义错误日志
Feb 13 PHP
php cookie 详解使用实例
Nov 03 PHP
PHP 7.0新增加的特性介绍
Jun 08 PHP
PHP MVC框架中类的自动加载机制实例分析
Sep 18 PHP
ThinkPHP5.0框架实现切换数据库的方法分析
Oct 30 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写的采集程序
2007/03/16 PHP
php简单对象与数组的转换函数代码(php多层数组和对象的转换)
2011/05/18 PHP
ci检测是ajax还是页面post提交数据的方法
2014/11/10 PHP
php目录遍历函数opendir用法实例
2014/11/20 PHP
PHP levenshtein()函数用法讲解
2019/03/08 PHP
yii2.0框架场景的简单使用示例
2020/01/25 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
jQuery find和children方法使用
2011/01/31 Javascript
jquery 跨域访问问题解决方法(笔记)
2011/06/08 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
Jquery实现textarea根据文本内容自适应高度
2015/04/03 Javascript
JavaScript三元运算符的多种使用技巧
2015/04/16 Javascript
Jquery轮播效果实现过程解析
2016/03/30 Javascript
非常酷炫的Bootstrap图片轮播动画
2016/05/27 Javascript
微信小程序中多个页面传参通信的学习与实践
2017/05/05 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信提示 在浏览器打开 效果实现过程解析
2019/09/10 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
python打开文件并获取文件相关属性的方法
2015/04/23 Python
opencv python 图像去噪的实现方法
2018/08/31 Python
详解Python下Flask-ApScheduler快速指南
2018/11/04 Python
Python字典的核心底层原理讲解
2019/01/24 Python
500行Python代码打造刷脸考勤系统
2019/06/03 Python
python二进制文件的转译详解
2019/07/03 Python
Python获取命令实时输出-原样彩色输出并返回输出结果的示例
2019/07/11 Python
用Python从0开始实现一个中文拼音输入法的思路详解
2019/07/20 Python
Tensorflow与Keras自适应使用显存方式
2020/06/22 Python
Python调用Redis的示例代码
2020/11/24 Python
英国二手物品交易网站:Preloved
2017/10/06 全球购物
Oracle里面常用的数据字典有哪些
2014/02/14 面试题
结婚喜宴家长答谢词
2014/01/15 职场文书
公交公司毕业生求职信
2014/02/15 职场文书
建筑安全责任书范本
2014/07/24 职场文书
《夹竹桃》教学反思
2016/02/23 职场文书
AJAX学习笔记
2021/05/18 Javascript
你知道哪几种MYSQL的连接查询
2021/06/03 MySQL