HTML로 데이터베이스의 내용을 읽는 방법

HTML로 데이터베이스 내용을 읽는 작업에는 4단계가 포함됩니다. 즉, 데이터베이스 연결을 설정하기 위해 JavaScript를 통해 요청을 보내는 것입니다. onload 이벤트 핸들러를 사용하여 응답을 구문 분석합니다. JSON을 구문 분석하는 JSON.parse()와 같은 데이터 유형을 기반으로 데이터를 구문 분석합니다. innerHTML 또는appendChild() 메서드를 사용하여 HTML 문서에 구문 분석된 데이터를 삽입합니다.

HTML로 데이터베이스 내용을 읽는 방법

HTML로 데이터베이스 내용을 읽는 과정은 다음과 같습니다.

1 데이터베이스에 연결

JavaScript의 사용 XMLHttpRequest 객체는 데이터베이스에 대한 연결을 설정합니다. XMLHttpRequest 对象建立与数据库的连接。

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

2. 处理响应

当收到来自数据库的响应时，使用 XMLHttpRequest 对象的 onload 事件处理程序解析数据。

<code class="javascript">request.onload = function() {
  if (request.status === 200) {
    const data = request.responseText;
    // 解析并使用数据
  }
};</code>

3. 解析数据

根据数据库返回的数据类型解析数据。例如，如果数据为 JSON 格式，则可以使用 JSON.parse() 方法将其解析为 JavaScript 对象。

<code class="javascript">const dataObject = JSON.parse(data);</code>

4. 使用数据

解析数据后，可以使用它来更新 HTML 文档。可以使用 innerHTML 或 appendChild()

<code class="html"><table id="resultTable"></table></code>

2. 응답 처리

데이터베이스에서 응답이 수신되면 XMLHttpRequest 개체의 onload 이벤트 핸들러를 사용하여 데이터를 구문 분석합니다.

<code class="javascript">const request = new XMLHttpRequest();
request.open("GET", "database.php");
request.onload = function() {
  if (request.status === 200) {
    const data = request.responseText;
    const dataObject = JSON.parse(data);

    // 创建表格行和单元格
    for (let i = 0; i < dataObject.length; i++) {
      const row = document.createElement("tr");
      const cell1 = document.createElement("td");
      const cell2 = document.createElement("td");

      // 设置单元格内容
      cell1.innerHTML = dataObject[i].id;
      cell2.innerHTML = dataObject[i].name;

      // 添加单元格和行到表格
      row.appendChild(cell1);
      row.appendChild(cell2);
      document.getElementById("resultTable").appendChild(row);
    }
  }
};

request.send();</code>

🎜3. 데이터 구문 분석🎜🎜🎜데이터베이스에서 반환된 데이터 유형에 따라 데이터를 구문 분석합니다. 예를 들어 데이터가 JSON 형식인 경우 JSON.parse() 메서드를 사용하여 이를 JavaScript 개체로 구문 분석할 수 있습니다. 🎜rrreee🎜🎜4. 데이터 사용🎜🎜🎜데이터를 구문 분석한 후 이를 사용하여 HTML 문서를 업데이트할 수 있습니다. innerHTML 또는 appendChild() 메서드를 사용하여 HTML 요소에 데이터를 삽입할 수 있습니다. 🎜🎜🎜샘플 코드🎜🎜🎜다음은 데이터베이스에서 데이터를 가져와 HTML 테이블에 표시하는 방법을 보여주는 샘플 코드입니다. 🎜rrreeerrreee

위 내용은 HTML로 데이터베이스의 내용을 읽는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!