Ajax+PHP 边学边练 之二 实例
2015-01-24信息快讯网
本篇通过一个实例介绍Ajax与PHP结合使用的方式,可以下载该实例的源程序以便更好理解。压缩包中functions.js就是Ajax核心代码了,所有的操作效果都是通过它来实现的。下文的代码解释都是提取自functions.js。
效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图: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. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:
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 数组使用详解 推荐
php smarty 二级分类代码和模版循环例子
PHP 八种基本的数据类型小结
php自动获取字符串编码函数mb_detect_encoding
JS与PHP向函数传递可变参数的区别实例代码
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
php中通过Ajax如何实现异步文件上传的代码实例
php产生随机数的两种方法实例代码 输出随机IP
PHP随机数生成代码与使用实例分析
Discuz Uchome ajaxpost小技巧
php的ajax框架xajax入门与试用介绍
ajax实现无刷新分页(php)
基于asp+ajax和数据库驱动的二级联动菜单
php 运行效率总结(提示程序速度)
MYSQL 小技巧 -- LAST_INSERT_ID
php Memcache 中实现消息队列
phplock(php进程锁) v1.0 beta1
PHP 进程锁定问题分析研究
PHP 递归效率分析
PHP 单引号与双引号的区别
php面向对象全攻略 (二) 实例化对象 使用对象成员
ajax php 实现写入数据库
PHP 开源AJAX框架14种
PHP 翻页 实例代码
php 购物车实例(申精)
AspNetAjaxPager,Asp.Net通用无刷新Ajax分页控件,支持多样式多数据绑定
php xml实例 留言本
php mysql 留言本应用实例第1/2页
解决了Ajax、MySQL 和 Zend Framework 的乱码问题
PHP Ajax中文乱码问题解决方法