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程序
Feb 04 PHP
PHP持久连接mysql_pconnect()函数使用介绍
Feb 05 PHP
php防止sql注入代码实例
Dec 18 PHP
ThinkPHP模版中导入CSS和JS文件的方法
Nov 29 PHP
php去除头尾空格的2种方法
Mar 16 PHP
PHP实现QQ登录实例代码
Jan 14 PHP
Zend Framework教程之Zend_Config_Ini用法分析
Mar 23 PHP
总结PHP删除字符串最后一个字符的三种方法
Aug 30 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
Jun 13 PHP
使用SMB共享来绕过php远程文件包含的限制执行RFI的利用
May 31 PHP
设定php简写功能的方法
Nov 28 PHP
PHP Beanstalkd消息队列的安装与使用方法实例详解
Feb 21 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实现获取文件mime类型的方法
2015/02/11 PHP
PHP基于socket实现客户端和服务端通讯功能
2017/07/13 PHP
ASP.NET jQuery 实例1(在TextBox里面创建一个默认提示)
2012/01/13 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
javascript:FF/Chrome与IE动态加载元素的区别说明
2014/01/26 Javascript
JavaScript实现简单的数字倒计时
2015/05/15 Javascript
整理AngularJS中的一些常用指令
2015/06/16 Javascript
理解javascript异步编程
2016/01/27 Javascript
Node.js的Web模板引擎ejs的入门使用教程
2016/06/06 Javascript
jQuery模仿单选按钮选中效果
2016/06/24 Javascript
jQuery中JSONP的两种实现方式详解
2016/09/26 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
vue实现跨域的方法分析
2019/05/21 Javascript
原生js实现随机点餐效果
2019/12/10 Javascript
python计数排序和基数排序算法实例
2014/04/25 Python
Python性能优化的20条建议
2014/10/25 Python
python在控制台输出进度条的方法
2015/06/20 Python
详解Python中映射类型(字典)操作符的概念和使用
2015/08/19 Python
python 判断是否为正小数和正整数的实例
2017/07/23 Python
selenium+python实现自动登录脚本
2018/04/22 Python
django基础学习之send_mail功能
2019/08/07 Python
python第三方库学习笔记
2020/02/07 Python
python多进程使用函数封装实例
2020/05/02 Python
python中doctest库实例用法
2020/12/31 Python
html5 更新图片颜色示例代码
2014/07/29 HTML / CSS
Elemis美国官网:英国的第一豪华护肤品牌
2018/03/15 全球购物
Gap英国官网:Gap UK
2018/07/18 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
社团活动总结
2014/04/28 职场文书
营业用房租赁协议书
2014/11/26 职场文书
团结友爱主题班会
2015/08/13 职场文书
如何撰写促销方案?
2019/07/05 职场文书
CSS3 Tab动画实例之背景切换动态效果
2021/08/23 HTML / CSS
css清除浮动clearfix:after的用法详解(附完整代码)
2023/05/21 HTML / CSS