Ajax と PHP の学習と実践パート 2 Example_PHP チュートリアル

この記事では、例を通して Ajax と PHP の使用法を紹介します。よりよく理解するために、この例のソース プログラムをダウンロードできます。圧縮パッケージ内のfunctions.jsはAjaxコアコードであり、すべての操作効果はそれを通じて実現されます。以下のコード説明はすべてfunctions.jsから抽出したものです。

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

クリップボードにコピー引用コンテンツ: [www.bkjia.com] function checkfortasks (thedate, e){ //ページ内のタスクボックスに対応する

を見つけて、それを表示するように設定します
theObject = document.getElementById("taskbox");
theObject.style.visibility = " visible";
//タスクボックスの位置の初期化
var posx = 0;
var posy = 0;
// タスクボックスの位置をマウスの位置として配置します
posx = e.clientX + document.body.scrollLeft;
posy = e. clientY + document.body.scrollTop;
theObject.style.left = posx + "px";
theObject.style.top = posy + "px";
//PHP リクエスト ページを設定します
serverPage = "Ajax と PHP の学習と実践パート 2 Example_PHP チュートリアルer.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. 特定の日にマウスをクリックして名前を入力すると、システムはその名前が存在するかどうかを自動的に検索し、図に示すように選択によって名前ボックスに入力できます。

クリップボードにコピー

引用コンテンツ: [www.bkjia.com] function autocomplete (thevalue, e){ //ページ上の autocompletediv (取得した名前を表示するラベル) の位置を見つけます theObject = document.getElementById("autocompletediv"); // bevisible
theObject.style .visibility = "visible";
theObject.style.width = "152px";
var posx = 0

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

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

if (theextrachar == undefine){
theextrachar = e.keyCode;読み込み中の検索リストの位置
var objID = "autocompletediv";

//PHP リクエスト ページを設定し、ユーザーが入力した名前を渡します (Backspace 関数を考慮して)
if (theextrachar == 8){
if ( thevalue.length == 1 ){
varserverPage = "autocomp.php";
}
else{
varserverPage = "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);
ソースコードのダウンロード:Sample3.rar

http://www.bkjia.com/PHPjc/364430.htmlwww.bkjia.comtru​​ehttp://www.bkjia.com/PHPjc/364430.html技術記事この記事では、例を通じて Ajax と PHP の使用法を紹介します。よりよく理解するために、この例のソース プログラムをダウンロードできます。圧縮パッケージ内のfunctions.jsはAjaxコアコードであり、すべての操作...