快捷導(dǎo)航

Ajax+PHP 邊學(xué)邊練之二實(shí)例

更新時(shí)間：2021年08月07日 17:06:11 投稿：mdxy-dxy

本篇通過(guò)一個(gè)實(shí)例介紹Ajax與PHP結(jié)合使用的方式，可以下載該實(shí)例的源程序以便更好理解。壓縮包中functions.js就是Ajax核心代碼了，所有的操作效果都是通過(guò)它來(lái)實(shí)現(xiàn)的。下文的代碼解釋都是提取自functions.js。

效果1. 當(dāng)鼠標(biāo)放在某日上時(shí)，如果當(dāng)天有備忘錄，則會(huì)顯示出來(lái)，如下圖：

function checkfortasks (thedate, e){ 
//找到頁(yè)面中taskbox對(duì)應(yīng)<div>設(shè)置為可見(jiàn) 
theObject = document.getElementById("taskbox"); 
theObject.style.visibility = "visible"; 
//初始化taskbox位置 
var posx = 0; 
var posy = 0; 
//定位taskbox位置為鼠標(biāo)位置 
posx = e.clientX + document.body.scrollLeft; 
posy = e.clientY + document.body.scrollTop; 
theObject.style.left = posx + "px"; 
theObject.style.top = posy + "px"; 
//設(shè)置PHP請(qǐng)求頁(yè)面 
serverPage = "taskchecker.php?thedate=" + thedate; 
//設(shè)置PHP返回?cái)?shù)據(jù)替換位置 
objID = "taskbox"; 
var obj = document.getElementById(objID); 
//發(fā)送請(qǐng)求并加載返回?cái)?shù)據(jù) 
xmlhttp.open("GET", serverPage); 
xmlhttp.onreadystatechange = function(){ 
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){ 
obj.innerHTML = xmlhttp.responseText; 
} 
} 
xmlhttp.send(null); 
}

效果2. 當(dāng)鼠標(biāo)點(diǎn)擊某日錄入姓名時(shí)，系統(tǒng)會(huì)自動(dòng)檢索姓名是否存在，并可以通過(guò)選擇填入姓名框中，如圖：

function autocomplete (thevalue, e){ 
//定位頁(yè)面中autocompletediv（顯示檢索姓名的標(biāo)簽）的<div>位置 
theObject = document.getElementById("autocompletediv"); 
//設(shè)置為可見(jiàn) 
theObject.style.visibility = "visible"; 
theObject.style.width = "152px"; 
//設(shè)置檢索標(biāo)簽位置 
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"; 
//設(shè)定事件為鍵盤(pán)錄入 
var theextrachar = e.which; 

if (theextrachar == undefined){ 
theextrachar = e.keyCode; 
} 
//設(shè)定加載檢索名單位置 
var objID = "autocompletediv"; 

//設(shè)定PHP請(qǐng)求頁(yè)面，并將用戶(hù)輸入的姓名傳值過(guò)去（同時(shí)考慮到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); 
} 
//發(fā)送請(qǐng)求并加載返回?cái)?shù)據(jù) 
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); 
}

文件打包下載