Ajax+PHP Learning and Practicing Part 2 Example_PHP Tutorial-PHP Tutorial-php.cn

Effect 1. When the mouse is placed on a certain day, if there are memos on that day, it will be displayed, as shown below:
taskcheck

Copy code The code is as follows:

function checkfortasks (thedate, e){
//Find the taskbox corresponding

in the page and set it to be visible
theObject = document.getElementById("taskbox" );
theObject.style.visibility = "visible";
//Initialize taskbox position
var posx = 0;
var posy = 0;
//Position taskbox position to the mouse position
posx = e.clientX + document.body.scrollLeft;
posy = e.clientY + document.body.scrollTop;
theObject.style.left = posx + "px";
theObject. style.top = posy + "px";
//Set the PHP request page
serverPage = "taskchecker.php?thedate=" + thedate;
//Set the PHP return data replacement position
objID = "taskbox";
var obj = document.getElementById(objID);
//Send a request and load the return data
xmlhttp.open("GET", serverPage);
xmlhttp.onreadystatechange = function(){
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send( null);
}

Effect 2. When the mouse clicks to enter a name on a certain day, the system will automatically search whether the name exists, and can fill in the name box by selection, as shown in the figure:
namecheck

Copy code The code is as follows:

function autocomplete (thevalue, e){
// Position the

of the autocompletediv (the label that displays the retrieved name) in the page
theObject = document.getElementById("autocompletediv");
//Set to visible
theObject.style.visibility = "visible ";
theObject.style.width = "152px";
//Set the retrieval tag position
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";
//Set the event to keyboard input
var theextrachar = e.which;

if (theextrachar == undefined){
theextrachar = e.keyCode;
}
//Set the location to load the search list
var objID = "autocompletediv";

//Set the PHP request page , and pass the name entered by the user by value (taking into account the Backspace function)
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);
}
//Send the request and load the return data
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);
}

File package download

Related labels：

memorandum Example Effect show have mouse

source：php.cn

Previous article：Combining php with XML, XSLT, and Mysql to implement code_PHP tutorial Next article：Calendar control with php+javascript_PHP tutorial

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn