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中的cookie不用刷新就生效的方法
Feb 04 PHP
PHP设计模式 注册表模式(多个类的注册)
Feb 05 PHP
PHP运行出现Notice : Use of undefined constant 的完美解决方案分享
Mar 05 PHP
使用PHP接收POST数据,解析json数据
Jun 28 PHP
通过table标签,PHP输出EXCEL的实现方法
Jul 24 PHP
php打印输出棋盘的实现方法
Dec 23 PHP
php给每个段落添加空格的方法
Mar 20 PHP
php中关于长度计算容易混淆的问题分析
May 27 PHP
PHP使用ActiveMQ实例
Feb 05 PHP
ThinkPHP5框架缓存查询操作分析
May 30 PHP
PHP正则表达式处理函数(PCRE 函数)实例小结
May 09 PHP
php封装实现钉钉机器人报警接口的示例代码
Aug 08 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+Ajax实现表单验证的详解
2013/06/25 PHP
ThinkPHP让分页保持搜索状态的方法
2014/07/02 PHP
PHP自定义多进制的方法
2016/11/03 PHP
Yii全局函数用法示例
2017/01/22 PHP
PHP使用两个栈实现队列功能的方法
2018/01/15 PHP
PHP abstract 抽象类定义与用法示例
2018/05/29 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
2018/06/16 PHP
jquery 选择器引擎sizzle浅析
2013/02/06 Javascript
JS删除字符串中重复字符方法
2014/03/09 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
javascript实现图片自动和可控的轮播切换特效
2015/04/13 Javascript
如何用JS判断两个数字的大小
2016/07/21 Javascript
javascript iframe跨域详解
2016/10/26 Javascript
利用select实现年月日三级联动的日期选择效果【推荐】
2016/12/13 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
微信小程序如何实现全局重新加载
2019/06/05 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
2020/03/25 Javascript
Python字典操作简明总结
2015/04/13 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python 使用with上下文实现计时功能
2018/03/09 Python
对python读取zip压缩文件里面的csv数据实例详解
2019/02/08 Python
Python中sorted()排序与字母大小写的问题
2020/01/14 Python
python 使用事件对象asyncio.Event来同步协程的操作
2020/05/04 Python
python字符串拼接+和join的区别详解
2020/12/03 Python
CSS3教程(7):CSS3嵌入字体
2009/04/02 HTML / CSS
英国的知名精品百货公司:House of Fraser(福来德)
2016/08/14 全球购物
体验完美剃须:The Art of Shaving
2018/08/06 全球购物
英国鞋网:Rubber Sole
2020/03/03 全球购物
Napapijri西班牙在线商店:夹克、外套、运动衫等
2020/11/05 全球购物
业绩考核岗位职责
2014/02/01 职场文书
师德师风自我剖析材料
2014/09/27 职场文书
公司晚会主持词
2019/04/17 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
JS数组方法some、every和find的使用详情
2021/10/05 Javascript
各国货币符号大全
2022/02/17 杂记