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 相关文章推荐
Oracle Faq(Oracle的版本)
Oct 09 PHP
用PHP实现验证码功能
Oct 09 PHP
基于文本的访客签到簿
Oct 09 PHP
php将session放入memcached的设置方法
Feb 14 PHP
CI框架中通过hook的方式实现简单的权限控制
Jan 07 PHP
php使用post数组的键值创建同名变量并赋值的方法
Apr 03 PHP
PHP aes (ecb)解密后乱码问题
Jun 22 PHP
php魔法函数与魔法常量使用介绍
Jul 23 PHP
Laravel框架FormRequest中重写错误处理的方法
Feb 18 PHP
PHP标准库(PHP SPL)详解
Mar 16 PHP
Laravel5.5 动态切换多语言的操作方式
Oct 25 PHP
laravel框架中表单请求类型和CSRF防护实例分析
Nov 23 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
多重?l件?合查?(一)
2006/10/09 PHP
使用php+Ajax实现唯一校验实现代码[简单应用]
2011/11/29 PHP
php获取用户IPv4或IPv6地址的代码
2012/11/15 PHP
基于PHP常用字符串的总结(待续)
2013/06/07 PHP
PHP类中的魔术方法(Magic Method)简明总结
2014/07/08 PHP
一个简洁实用的PHP缓存类完整实例
2014/07/26 PHP
smarty实现多级分类的方法
2014/12/05 PHP
IE 缓存策略的BUG的解决方法
2007/07/21 Javascript
javascript 表单规则集合对象
2009/07/21 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
jquery实现滑动图片自己测试的例子
2013/11/05 Javascript
AngularJS实现全选反选功能
2015/12/08 Javascript
一篇文章掌握RequireJS常用知识
2016/01/26 Javascript
JS实现CheckBox复选框全选、不选或全不选功能
2020/07/28 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
使用react-router4.0实现重定向和404功能的方法
2017/08/28 Javascript
Vue.js简易安装和快速入门(第二课)
2017/10/17 Javascript
javascript如何实现create方法
2019/11/04 Javascript
JavaScript面试中常考的字符串操作方法大全(包含ES6)
2020/05/10 Javascript
python用opencv批量截取图像指定区域的方法
2019/01/24 Python
对pandas通过索引提取dataframe的行方法详解
2019/02/01 Python
python实现邮件发送功能
2019/08/10 Python
Python面向对象程序设计之继承、多态原理与用法详解
2020/03/23 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
Python操作Excel把数据分给sheet
2020/05/20 Python
Python小白不正确的使用类变量实例
2020/05/29 Python
Python自动创建Excel并获取内容
2020/09/16 Python
通过Django Admin+HttpRunner1.5.6实现简易接口测试平台
2020/11/11 Python
如何向scrapy中的spider传递参数的几种方法
2020/11/18 Python
美国知名珠宝首饰品牌:Gemvara
2017/10/06 全球购物
Under Armour西班牙官网:美国知名的高端功能性运动品牌
2018/12/12 全球购物
波兰化妆品和护肤品购物网站:eKobieca
2019/08/30 全球购物
在校大学生个人的自我评价
2014/02/13 职场文书
促销活动总结怎么写
2014/06/25 职场文书
2014年小学重阳节活动策划方案
2014/09/16 职场文书
2015年党员个人剖析材料
2014/12/18 职场文书