Ajax+PHP 边学边练 之二 实例

 更新时间:2021年08月07日 17:06:11   投稿:mdxy-dxy  
本篇通过一个实例介绍Ajax与PHP结合使用的方式,可以下载该实例的源程序以便更好理解。压缩包中functions.js就是Ajax核心代码了,所有的操作效果都是通过它来实现的。下文的代码解释都是提取自functions.js。

效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:

taskcheck

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. 当鼠标点击某日录入姓名时,系统会自动检索姓名是否存在,并可以通过选择填入姓名框中,如图:

namecheck

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生成rss类用法实例

    php生成rss类用法实例

    这篇文章主要介绍了php生成rss类用法,实例分析了使用rssbuilder.class.php类文件生成rss的技巧,需要的朋友可以参考下
    2015-04-04
  • PHP中ADODB类详解

    PHP中ADODB类详解

    1. 前言 ADODB 是 Active Data Objects Data Base 的简称,它是一种 PHP 存取数据库的函式组件。现在 SFS3 系统 (校园自由软件交流网学务系统) 计划的主持人陈莹光老师,决定采用此一组件,为了让更多有心参与该项目的伙伴们能够顺利加入发展的行列,小弟认为有必要把 ADODB 的中文入门介绍写出来,以方便伙伴们参考备查。
    2008-03-03
  • php图像处理类实例

    php图像处理类实例

    这篇文章主要介绍了php图像处理类,涉及php操作图片的大小修改、加水印、生成验证码、输出及保存图像的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-07-07
  • PHP code 验证码生成类定义和简单使用示例

    PHP code 验证码生成类定义和简单使用示例

    这篇文章主要介绍了PHP code 验证码生成类定义和简单使用,结合实例形式分析了PHP code 验证码生成类的基本功能定义、简单使用方法及操作注意事项,需要的朋友可以参考下
    2020-05-05
  • 详解PHP7开启OPcache和Swoole性能的提升对比

    详解PHP7开启OPcache和Swoole性能的提升对比

    laravel作为最热门的php框架之一,广受认可与欢迎。同时由于集成度很高,每次运行都加载了大量文件,加之使用了大量的闭包、魔术方法,导致laravel框架很重,并发性能极差。OPcache和Swoole都是php的扩展,这次旨在比较这两个扩展分别开启后对Laravel应用的加速效果。
    2021-05-05
  • php判断数组中是否存在指定键(key)的方法

    php判断数组中是否存在指定键(key)的方法

    这篇文章主要介绍了php判断数组中是否存在指定键(key)的方法,实例分析了php中array_key_exists和isset的使用技巧,非常具有实用价值,需要的朋友可以参考下
    2015-03-03
  • 基于header的一些常用指令详解

    基于header的一些常用指令详解

    本篇文章是对header的一些常用指令进行了详细的分析介绍,需要的朋友参考下
    2013-06-06
  • dir()、readdir()、scandir()和glob()四种遍历目录方法及性能分析

    dir()、readdir()、scandir()和glob()四种遍历目录方法及性能分析

    php遍历目录和文件的场景在很多时候都能用到,遍历目录方法的方法有好几种,那么应该使用哪种方法呢?下面介绍dir()、readdir()、scandir()和glob()四种遍历目录方法及性能分析。
    2022-12-12
  • php对象工厂类完整示例

    php对象工厂类完整示例

    这篇文章主要介绍了php对象工厂类,涉及php参数获取、数组使用、对象创建等相关操作技巧,需要的朋友可以参考下
    2018-08-08
  • php实现图片局部打马赛克的方法

    php实现图片局部打马赛克的方法

    这篇文章主要介绍了php实现图片局部打马赛克的方法,实例分析了php针对图片操作的技巧,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论