• 技术文章 >后端开发 >php教程

    Ajax+PHP 边学边练 之二 实例_PHP

    2016-06-01 12:22:14原创331
    Ajax

    效果1. 当鼠标放在某日上时,如果当天有备忘录,则会显示出来,如下图:
    taskcheck
    复制代码 代码如下:
    function checkfortasks (thedate, e){
    //找到页面中taskbox对应
    设置为可见
    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(显示检索姓名的标签)的
    位置
    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);
    }

    文件打包下载
    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:Ajax PHP
    上一篇:MYSQL 小技巧 -- LAST_INSERT_ID_PHP 下一篇:PHP 单引号与双引号的区别_PHP
    PHP编程就业班

    相关文章推荐

    • 如何配置php.ini,进行PHP性能调优?• PHP高并发实例详解之商品库存超卖并发测试• PHP高并发实例详解之解决商品库存超卖问题• 详解PHP中cookie和session的区别及cookie和session用法小结,cookiesession_PHP教程• ThinkPHP 404页面的设置方法_PHP教程

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网