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中比较简单的导入phpmyadmin生成的sql文件的方法
Jun 28 PHP
数组与类使用PHP的可变变量名需要的注意的问题
Jun 20 PHP
PHP反射类ReflectionClass和ReflectionObject的使用方法
Nov 13 PHP
PHP字符串中特殊符号的过滤方法介绍
Feb 18 PHP
php数组合并与拆分实例分析
Jun 12 PHP
php防止网站被攻击的应急代码
Oct 21 PHP
PHP编程开发怎么提高编程效率 提高PHP编程技术
Nov 09 PHP
PHP共享内存用法实例分析
Feb 12 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
May 31 PHP
PHP使用imagick扩展实现合并图像的方法
Apr 25 PHP
搭建自己的PHP MVC框架详解
Aug 16 PHP
YII2框架中添加自定义模块的方法实例分析
Mar 18 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基础学习之变量的使用
2011/06/09 PHP
ThinkPHP多表联合查询的常用方法
2020/03/24 PHP
PHP中empty,isset,is_null用法和区别
2017/02/19 PHP
PHP高效获取远程图片尺寸和大小的实现方法
2017/10/20 PHP
微信公众号之主动给用户发送消息功能
2019/06/22 PHP
php解决crontab定时任务不能写入文件问题的方法分析
2019/09/16 PHP
Firefox getBoxObjectFor getBoundingClientRect联系
2008/10/26 Javascript
safari,opera嵌入iframe页面cookie读取问题解决方法
2010/06/23 Javascript
javascript实现tabs选项卡切换效果(扩展版)
2013/03/19 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
2014/09/02 Javascript
全面解析Bootstrap表单使用方法(表单控件状态)
2015/11/24 Javascript
基于jQuery的checkbox全选问题分析
2016/11/18 Javascript
原生Javascript插件开发实践
2017/01/18 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
Angular1.x复杂指令实例详解
2017/03/01 Javascript
详解vue添加删除元素的方法
2018/06/30 Javascript
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
Vue两种组件类型:递归组件和动态组件的用法
2020/08/06 Javascript
JavaScript实现页面高亮操作提示和蒙板
2021/01/04 Javascript
微信小程序选择图片控件
2021/01/19 Javascript
[01:03:36]Ti4 循环赛第三日DK vs Titan
2014/07/12 DOTA
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
跟老齐学Python之传说中的函数编写条规
2014/10/11 Python
详解Python中DOM方法的动态性
2015/04/11 Python
基于Python和Scikit-Learn的机器学习探索
2017/10/16 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python 3.6.4 安装配置方法图文教程
2018/09/18 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
jupyter notebook插入本地图片的实现
2020/04/13 Python
详解Sticky Footer 绝对底部的两种套路
2017/11/03 HTML / CSS
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
QA工程师岗位职责
2013/11/20 职场文书
大学本科生的个人自我评价
2013/12/09 职场文书
甜品店的创业计划书范文
2014/01/02 职场文书
离婚上诉状范文
2015/05/23 职场文书
小人国观后感
2015/06/11 职场文书