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实现登陆验证码(类似条行码状)
Oct 09 PHP
PHP 地址栏信息的获取代码
Jan 07 PHP
11个PHP 分页脚本推荐
Aug 15 PHP
php摘要生成函数(无乱码)
Feb 04 PHP
php单例模式实现(对象只被创建一次)
Dec 05 PHP
基于xcache的配置与使用详解
Jun 18 PHP
destoon实现调用图文新闻的方法
Aug 21 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
Jan 26 PHP
php动态生成缩略图并输出显示的方法
Apr 20 PHP
php异常处理方法实例汇总
Jun 24 PHP
如何写php守护进程(Daemon)
Dec 30 PHP
php中输出json对象的值(实现方法)
Mar 07 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
最贵的咖啡是怎么产生的,它的风味怎么样?
2021/03/04 新手入门
Windows下PHP5和Apache的安装与配置
2006/09/05 PHP
Yii2使用$this-&gt;context获取当前的Module、Controller(控制器)、Action等
2017/03/29 PHP
javascript 获取表单file全路径
2009/12/31 Javascript
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
js判断客户端是iOS还是Android等移动终端的方法
2013/12/11 Javascript
JSON.stringify转换JSON时日期时间不准确的解决方法
2014/08/08 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
2015/08/26 Javascript
easyui validatebox验证
2016/04/29 Javascript
Vuejs第六篇之Vuejs与form元素实例解析
2016/09/05 Javascript
AngularJS 应用身份认证的技巧总结
2016/11/07 Javascript
利用JS轻松实现获取表单数据
2016/12/06 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
2016/12/28 Javascript
ES5 ES6中Array对象去除重复项的方法总结
2017/04/27 Javascript
javascript基础进阶_深入剖析执行环境及作用域链
2017/09/05 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
VUE:vuex 用户登录信息的数据写入与获取方式
2019/11/11 Javascript
详解Python多线程
2016/11/14 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
python实现最大优先队列
2019/08/29 Python
解决django无法访问本地static文件(js,css,img)网页里js,cs都加载不了
2020/04/07 Python
Python PyQt5运行程序把输出信息展示到GUI图形界面上
2020/04/27 Python
python程序如何进行保存
2020/07/03 Python
西班牙第一的网上药房:PromoFarma.com
2017/04/17 全球购物
阿根廷首家户外用品制造商和经销商:Montagne
2018/02/12 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
环保建议书200字
2014/05/14 职场文书
中央空调节能方案
2014/06/15 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
结婚堵门保证书
2015/05/08 职场文书
三好学生竞选稿范文
2019/08/21 职场文书
读后感怎么写?书写读后感的基本技巧!
2019/12/10 职场文书
Python 如何安装Selenium
2021/05/06 Python
在Python中如何使用yield
2021/06/07 Python
springboot读取nacos配置文件
2022/05/20 Java/Android