JavaScriptでテキストに値を入力し、その値に基づいてデータベースにクエリを実行する方法

Web アプリケーションの開発により、JavaScript は最も人気のあるクライアント側言語の 1 つになりました。 JavaScript は、動的な Web ページ、フォーム検証、対話型ユーザー インターフェイス、アニメーション効果など、さまざまな機能を実装できます。この記事では、JavaScript を使用して、テキスト ボックスに値を入力した後、自動的にデータベースにクエリを実行する方法を紹介します。

1. クエリ データを決定する

JavaScript を使用してデータベースにクエリを実行する前に、クエリするデータを決定する必要があります。データベース クエリを使用すると、必要なデータ セットを取得できます。この例では、名前、成績など、すべての学生に関する情報が含まれる学生管理システム データベースをシミュレートします。ユーザーが入力ボックスに生徒の名前を入力すると、JavaScript を使用してデータベースに自動的にクエリを実行し、生徒の成績情報を表示します。

2. データベース接続の確立

データベースにクエリを実行するには、データベースに接続する必要があります。 AJAX テクノロジーを使用すると、ページを更新せずにサーバーにリクエストを送信し、応答を取得できます。この例では、XMLHttpRequest オブジェクトを使用して AJAX リクエストを実装します。以下は、データベース接続を確立する例です。

var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
        // 处理响应数据
    }
};
xmlhttp.open("GET", "getstudentinfo.php?q=" + str, true);
xmlhttp.send();

上記のコードでは、XMLHttpRequest オブジェクトを使用して新しい AJAX リクエストを作成します。 readyState が変化すると、コールバック関数を呼び出して応答データを処理します。このうち、readyState 属性は AJAX リクエストのステータスを表し、status 属性はレスポンスのステータスコードを表します。 open() メソッドを呼び出すことで、要求された URL と要求タイプ (「GET」または「POST」) を指定できます。 send() メソッドを呼び出した後、AJAX リクエストがサーバーに送信されます。

3. 入力ボックス イベントをリッスンする

ユーザーが入力ボックスに文字を入力すると、対応する結果を取得するためにリアルタイムでデータベースにクエリを実行する必要があります。入力ボックスのイベントをリッスンするには、addEventListener() メソッドを使用してイベント ハンドラーを入力ボックスに関連付けます。以下は、入力ボックス イベントをリッスンする例です:

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    // 查询数据库
});

上記のコードでは、addEventListener() メソッドを通じて「keyup」イベント ハンドラーを登録しました。ユーザーが入力ボックスに文字を入力すると、イベントがトリガーされます。 document.getElementById() メソッドを通じて入力ボックス要素を取得し、次に value 属性を使用して入力ボックスの値を取得します。

4. データベースにクエリを実行して結果を表示する

ユーザーが入力ボックスに文字を入力すると、対応するデータを取得するためにサーバーに AJAX リクエストを送信する必要があります。 。データベースにクエリを実行して結果を表示する例を次に示します。

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            document.getElementById("result").innerHTML = this.responseText;
        }
    };
    xmlhttp.open("GET", "getstudentinfo.php?q=" + input_value, true);
    xmlhttp.send();
});

上記のコードでは、入力値を含む AJAX リクエストをサーバーに送信し、サーバーは学生の情報を含む HTML フラグメントを返します。情報。 readyState が変化すると、応答データが result 要素に保存され、生徒の情報を表示するために使用されます。

5. 自動補完の実現

入力ボックスに値を入力するとデータベースに自動的にクエリを実行するだけでなく、自動補完機能も実装できます。ユーザーが入力ボックスに文字を入力すると、利用可能なオプションを含むドロップダウン メニューを表示できます。オートコンプリートの実装例は次のとおりです:

document.getElementById("input").addEventListener("keyup", function() {
    var input_value = document.getElementById("input").value;
    var xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            var options = JSON.parse(this.responseText);
            var ul = document.getElementById("auto-complete");
            ul.innerHTML = "";
            for (var i = 0; i < options.length; i++) {
                var li = document.createElement("li");
                var a = document.createElement("a");
                a.appendChild(document.createTextNode(options[i]));
                a.setAttribute("href", "#");
                li.appendChild(a);
                ul.appendChild(li);
            }
            if (options.length > 0) {
                ul.style.display = "block";
            } else {
                ul.style.display = "none";
            }
        }
    };
    xmlhttp.open("GET", "getstudentnames.php?q=" + input_value, true);
    xmlhttp.send();
});

上記のコードでは、入力値を含む AJAX リクエストをサーバーに送信し、サーバーは利用可能なオプションを含む JSON 配列を返します。 JSON.parse() メソッドを使用して、応答データを JavaScript オブジェクトに変換します。次に、オプションを含む順序なしリストを作成し、オートコンプリート要素に追加します。オプションの数が 0 より大きい場合は、ドロップダウン メニューが表示されます。

#結論

この記事では、JavaScript を使用して、テキスト ボックスに値を入力した後にデータベースに自動的にクエリを実行する方法を紹介します。 AJAX テクノロジーとイベント リスナーを使用することで、ユーザー インターフェイスと対話する強力かつ柔軟な方法を実現できます。 JavaScript と AJAX テクノロジについて詳しく知りたい場合は、文献やチュートリアルを参照してください。

以上がJavaScriptでテキストに値を入力し、その値に基づいてデータベースにクエリを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。