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的中问验证码
Nov 25 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
Dec 02 PHP
经典的PHPer为什么被认为是草根?
Apr 02 PHP
PHP提示Notice: Undefined variable的解决办法
Nov 24 PHP
PHPMailer邮件发送的实现代码
May 04 PHP
浅析php变量作用域的一些问题
Aug 08 PHP
PHPExcel内存泄漏问题解决方法
Jan 23 PHP
php限制上传文件类型并保存上传文件的方法
Mar 13 PHP
大家在抢红包,程序员在研究红包算法
Aug 31 PHP
PHP机器学习库php-ml的简单测试和使用方法
Jul 14 PHP
PHP mongodb操作类定义与用法示例【适合mongodb2.x和mongodb3.x】
Jun 16 PHP
总结PHP代码规范、流程规范、git规范
Jun 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实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP ADODB生成下拉列表框功能示例
2018/05/29 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
JavaScript 对象的属性和方法4种不同的类型
2010/03/19 Javascript
javascript学习笔记(三) String 字符串类型介绍
2012/06/19 Javascript
alert中断settimeout计时功能
2013/07/26 Javascript
jquery中子元素和后代元素的区别示例介绍
2014/04/02 Javascript
JavaScript日期时间格式化函数分享
2014/05/05 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
使用JSON作为函数的参数的优缺点
2016/10/27 Javascript
JavaScript控制输入框中只能输入中文、数字和英文的方法【基于正则实现】
2017/03/03 Javascript
基于JavaScript实现瀑布流效果
2017/03/29 Javascript
详解Vue 动态添加模板的几种方法
2017/04/25 Javascript
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
轻松搞定jQuery+JSONP跨域请求的解决方案
2018/03/06 jQuery
微信小程序实践之动态控制组件的显示/隐藏功能
2018/07/18 Javascript
axios简单实现小程序延时loading指示
2018/07/30 Javascript
JavaScript迭代器的含义及用法
2019/06/21 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
关于Vue中$refs的探索浅析
2020/11/05 Javascript
python刷投票的脚本实现代码
2014/11/08 Python
python使用xlrd实现检索excel中某列含有指定字符串记录的方法
2015/05/09 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
详解Python安装tesserocr遇到的各种问题及解决办法
2019/03/07 Python
Python3简单爬虫抓取网页图片代码实例
2019/08/26 Python
python 实现检验33品种数据是否是正态分布
2019/12/09 Python
Python 私有属性和私有方法应用场景分析
2020/06/19 Python
程序运行正确, 但退出时却"core dump"了,怎么回事
2014/02/19 面试题
软件测试有哪些?什么是配置项?
2012/02/12 面试题
教师的实习自我鉴定
2013/12/17 职场文书
调解协议书
2014/04/16 职场文书
医德考评自我评价
2014/09/14 职场文书
靠谱准确的求职信
2019/04/02 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
Ajax异步刷新功能及简单案例
2021/11/20 Javascript