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 相关文章推荐
ajax 的post方法实例(带循环)
Jul 04 PHP
组合算法的PHP解答方法
Feb 04 PHP
PHP使用SOAP调用.net的WebService数据
Nov 12 PHP
Drupal7连接多个数据库及常见问题解决
Mar 02 PHP
php冒泡排序、快速排序、快速查找、二维数组去重实例分享
Apr 24 PHP
PHP获取POST数据的几种方法汇总
Mar 03 PHP
php导出生成word的方法
Dec 25 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
Feb 10 PHP
CMSPRESS 10行代码搞定 PHP无限级分类2
Mar 30 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
May 09 PHP
PHP Swoole异步读取、写入文件操作示例
Oct 24 PHP
使用Git实现Laravel项目的自动化部署
Nov 24 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 pear安装配置教程
2016/05/14 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
jquery 模式对话框终极版实现代码
2009/09/28 Javascript
javascript 设为首页与加入收藏兼容多浏览器代码
2011/01/11 Javascript
Jvascript学习实践案例(开发常用)
2012/06/25 Javascript
动态标签 悬停效果 延迟加载示例代码
2013/11/21 Javascript
ff下JQuery无法监听input的keyup事件的解决方法
2013/12/12 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
JavaScript数据结构与算法之栈详解
2015/03/12 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript实现漂亮的拖动层,窗口拖拽特效
2015/04/24 Javascript
利用jQuery和CSS将背景图片拉伸
2015/10/16 Javascript
javascript如何写热点图
2015/12/08 Javascript
基于JQuery的$.ajax方法进行异步请求导致页面闪烁的解决办法
2016/05/10 Javascript
jquery的checkbox,radio,select等方法小结
2016/08/30 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
vuejs简单验证码功能完整示例
2019/01/08 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
2019/04/17 Javascript
axios封装,使用拦截器统一处理接口,超详细的教程(推荐)
2019/05/02 Javascript
vue使用canvas实现移动端手写签名
2020/09/22 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
Java 生成随机字符的示例代码
2021/01/13 Javascript
python 文件操作api(文件操作函数)
2016/08/28 Python
Python自动生产表情包
2017/03/17 Python
python非递归全排列实现方法
2017/04/10 Python
Python动态参数/命名空间/函数嵌套/global和nonlocal
2019/05/29 Python
python实现数据分析与建模
2019/07/11 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
HTML5 video播放器全屏(fullScreen)方法实例
2015/04/24 HTML / CSS
Tea Collection官网:一家位于旧金山的童装公司
2020/08/07 全球购物
北京奥运会口号
2014/06/21 职场文书
幼儿园中秋节活动总结
2015/03/23 职场文书
车间统计员岗位职责
2015/04/14 职场文书
2016学校元旦晚会经典开场白台词
2015/12/03 职场文书
三八红旗手先进事迹材料(2016推荐版)
2016/02/25 职场文书
详解Redis主从复制实践
2021/05/19 Redis