Ajax PHP の学習と実践パート 2 の例

効果 1. 特定の日にマウスを置くと、その日にメモがある場合、以下のように表示されます。

コードをコピー コードは次のとおりです。

function checkfortasks (thedate, e){
//ページ上でタスクボックスに対応する

を見つけて、表示されるように設定します。
theObject = document.getElementById("taskbox");
theObject.style.visibility = "visible"
//タスクボックスの位置を初期化します
var posx = 0; 0;
//タスクボックスの位置をマウスの位置に配置します
posy = e.clientX document.body.scrollTop; 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 を見つけます (取得名のラベルを表示します) theObject = document.getElementById("autocompletediv" );

//visible に設定します

theObject.style.visibility = "visible";
theObject.style.width = "152px";
//取得タグの位置を設定します
posx = 0;
var posy = 0;

posy = (findPosX (document.getElementById("yourname") 1 ); )) 23);

theObject.style.left = posx "px";
theObject.style.top = posy " px"
//イベントをキーボード入力として設定します
var theextrachar = e.that;

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",
xmlhttp.onreadystatechange = function); () {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
obj.innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null) );
}


ファイル パッケージのダウンロード