データベースの内容をHTMLで読み取る方法

HTML でデータベースからコンテンツを読み取るには、JavaScript を通じてリクエストを送信してデータベース接続を確立するという 4 つの手順が必要です。 onload イベント ハンドラーを使用して応答を解析します。 JSON を解析するための JSON.parse() など、データ型に基づいてデータを解析します。 innerHTML または appendChild() メソッドを使用して、解析されたデータを HTML ドキュメントに挿入します。

#データベースの内容を HTML で読み取る方法

データベースの内容を HTML で読み取るには、次の操作が必要です。手順:

1. データベースへの接続

JavaScript の

XMLHttpRequest オブジェクトを使用して、データベースへの接続を確立します。

<code class="javascript">const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.send();</code>

2. 応答の処理

データベースから応答を受信するときは、

XMLHttpRequest## の onload イベントを使用します。 # object ハンドラーはデータを解析します。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;javascript&quot;&gt;request.onload = function() { if (request.status === 200) { const data = request.responseText; // 解析并使用数据 } };&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

3. データの解析

データベースから返されたデータ型に従ってデータを解析します。たとえば、データが JSON 形式の場合、

JSON.parse()

メソッドを使用してデータを JavaScript オブジェクトに解析できます。 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;code class=&quot;javascript&quot;&gt;const dataObject = JSON.parse(data);&lt;/code&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div>

4. データの使用

データを解析した後、それを使用して HTML ドキュメントを更新できます。

innerHTML

または appendChild() メソッドを使用して、データを HTML 要素に挿入できます。

サンプル コード

次は、データベースからデータを取得して HTML テーブルに表示する方法を示すサンプル コードです。

以上がデータベースの内容をHTMLで読み取る方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。