Apr 09, 2024 pm 12:36 PM
mysql pangkalan data

HTML tidak boleh membaca pangkalan data secara langsung, tetapi ia boleh dicapai melalui JavaScript dan AJAX. Langkah-langkah termasuk mewujudkan sambungan pangkalan data, menghantar pertanyaan, memproses respons dan mengemas kini halaman. Artikel ini menyediakan contoh praktikal menggunakan JavaScript, AJAX dan PHP untuk membaca data daripada pangkalan data MySQL, menunjukkan cara untuk memaparkan hasil pertanyaan secara dinamik dalam halaman HTML. Contoh ini menggunakan XMLHttpRequest untuk mewujudkan sambungan pangkalan data, menghantar pertanyaan dan memproses respons, dengan itu mengisi data ke dalam elemen halaman dan merealisasikan fungsi HTML membaca pangkalan data.

Analisis HTML yang mendalam Cara membaca pangkalan data

Kata Pengantar

Dalam aplikasi web moden, membaca pangkalan data adalah penting, yang membolehkan kami mengekstrak data daripada pangkalan data dan memaparkannya kepada pengguna . HTML sendiri tidak boleh menyambung terus ke pangkalan data, tetapi kami boleh menggunakan teknologi JavaScript dan AJAX untuk mencapai fungsi ini. Artikel ini mendalami cara HTML membaca pangkalan data melalui JavaScript dan AJAX, dan menerangkannya dengan contoh.

JavaScript dan AJAX

JavaScript ialah bahasa skrip yang boleh mengubah suai kandungan dan tingkah laku halaman web secara dinamik. AJAX (Asynchronous JavaScript and XML) ialah teknologi yang membolehkan JavaScript berkomunikasi dengan pelayan tanpa memuatkan semula keseluruhan halaman. Menggunakan AJAX, kami boleh mengambil data daripada pangkalan data di latar belakang dan kemudian mengemas kini kandungan halaman.

Langkah

Membaca pangkalan data melibatkan langkah berikut:

  1. Mewujudkan sambungan pangkalan data: Gunakan JavaScript untuk mewujudkan sambungan ke pangkalan data seperti MySQL atau PostgreSQL.
  2. Hantar Pertanyaan: Tulis dan hantar pertanyaan SQL melalui JavaScript untuk mendapatkan data.
  3. Memproses respons: Terima dan menghuraikan respons daripada pangkalan data, ekstrak data yang diperlukan.
  4. Kemas kini halaman: Gunakan JavaScript untuk mengemas kini kandungan halaman web secara dinamik dan memaparkan data yang diperoleh daripada pangkalan data.

Kes praktikal

Berikut ialah contoh penggunaan HTML, JavaScript dan AJAX untuk membaca pangkalan data MySQL:

HTML

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

<div id="data-container"></div>

 

<script>

// 获取数据容器元素

const dataContainer = document.getElementById("data-container");

 

// 数据库连接信息

const dbHost = "localhost";

const dbName = "mydb";

const dbUser = "root";

const dbPass = "root";

 

// 建立数据库连接

const conn = new XMLHttpRequest();

conn.open("GET", `php/connect_db.php?host=${dbHost}&name=${dbName}&user=${dbUser}&pass=${dbPass}`);

conn.send();

 

// 监听数据库连接响应

conn.onreadystatechange = function() {

  if (this.readyState == 4 && this.status == 200) {

    // 数据库连接成功,发送查询

    const query = "SELECT * FROM users";

    const queryRequest = new XMLHttpRequest();

    queryRequest.open("POST", `php/query_db.php?query=${query}`);

    queryRequest.send();

 

    // 监听查询响应

    queryRequest.onreadystatechange = function() {

      if (this.readyState == 4 && this.status == 200) {

        // 查询成功,获取响应

        const data = JSON.parse(this.responseText);

 

        // 遍历数据并填充数据容器

        for (let i = 0; i < data.length; i++) {

          dataContainer.appendChild(document.createElement("p")).textContent = `Name: ${data[i].name}, Age: ${data[i].age}`;

        }

      }

    };

  }

};

</script>

Salin selepas log masuk

PHP (untuk sambungan pangkalan data dan pertanyaan

)

1

2

3

4

5

6

7

8

9

10

11

12

<strong><?php

// 数据库连接信息

$dbHost = $_GET['host'];

$dbName = $_GET['name'];

$dbUser = $_GET['user'];

$dbPass = $_GET['pass'];

 

// 建立数据库连接

$conn = new mysqli($dbHost, $dbUser, $dbPass, $dbName);

if ($conn->connect_error) {

  die("数据库连接失败: " . $conn->connect_error);

}</strong>

Salin selepas log masuk

query_db.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<strong><?php

include 'connect_db.php';

 

// 获取查询字符串

$query = $_GET['query'];

 

// 执行查询

$result = $conn->query($query);

if (!$result) {

  die("查询失败: " . $conn->error);

}

 

// 将查询结果编码为 JSON 格式

$data = json_encode($result->fetch_all(MYSQLI_ASSOC));

 

// 返回 JSON 数据

echo $data;</strong>

Salin selepas log masuk
Effect

Buka fail HTML yang mengandungi kod di atas dalam pelayar anda, ia secara automatik akan menanyakan pangkalan data dan mendapat respons daripada skrip PHP menggunakan AJAX. Data yang diperoleh daripada pangkalan data akan diisikan ke dalam elemen "bekas data", dan hasil pertanyaan akan dipaparkan pada halaman dalam masa nyata.

Atas ialah kandungan terperinci . Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Bagaimana untuk mengoptimumkan prestasi pertanyaan MySQL dalam PHP? Bagaimana untuk mengoptimumkan prestasi pertanyaan MySQL dalam PHP? Jun 03, 2024 pm 08:11 PM

Prestasi pertanyaan MySQL boleh dioptimumkan dengan membina indeks yang mengurangkan masa carian daripada kerumitan linear kepada kerumitan logaritma. Gunakan PreparedStatements untuk menghalang suntikan SQL dan meningkatkan prestasi pertanyaan. Hadkan hasil pertanyaan dan kurangkan jumlah data yang diproses oleh pelayan. Optimumkan pertanyaan penyertaan, termasuk menggunakan jenis gabungan yang sesuai, membuat indeks dan mempertimbangkan untuk menggunakan subkueri. Menganalisis pertanyaan untuk mengenal pasti kesesakan; gunakan caching untuk mengurangkan beban pangkalan data;

Bagaimana untuk menggunakan sandaran dan pemulihan MySQL dalam PHP? Bagaimana untuk menggunakan sandaran dan pemulihan MySQL dalam PHP? Jun 03, 2024 pm 12:19 PM

Membuat sandaran dan memulihkan pangkalan data MySQL dalam PHP boleh dicapai dengan mengikuti langkah berikut: Sandarkan pangkalan data: Gunakan arahan mysqldump untuk membuang pangkalan data ke dalam fail SQL. Pulihkan pangkalan data: Gunakan arahan mysql untuk memulihkan pangkalan data daripada fail SQL.

Bagaimana untuk memasukkan data ke dalam jadual MySQL menggunakan PHP? Bagaimana untuk memasukkan data ke dalam jadual MySQL menggunakan PHP? Jun 02, 2024 pm 02:26 PM

Bagaimana untuk memasukkan data ke dalam jadual MySQL? Sambung ke pangkalan data: Gunakan mysqli untuk mewujudkan sambungan ke pangkalan data. Sediakan pertanyaan SQL: Tulis pernyataan INSERT untuk menentukan lajur dan nilai yang akan dimasukkan. Laksanakan pertanyaan: Gunakan kaedah query() untuk melaksanakan pertanyaan sisipan Jika berjaya, mesej pengesahan akan dikeluarkan.

Bagaimana untuk menggunakan prosedur tersimpan MySQL dalam PHP? Bagaimana untuk menggunakan prosedur tersimpan MySQL dalam PHP? Jun 02, 2024 pm 02:13 PM

Untuk menggunakan prosedur tersimpan MySQL dalam PHP: Gunakan PDO atau sambungan MySQLi untuk menyambung ke pangkalan data MySQL. Sediakan penyata untuk memanggil prosedur tersimpan. Laksanakan prosedur tersimpan. Proses set keputusan (jika prosedur tersimpan mengembalikan hasil). Tutup sambungan pangkalan data.

Bagaimana untuk membetulkan ralat mysql_native_password tidak dimuatkan pada MySQL 8.4 Bagaimana untuk membetulkan ralat mysql_native_password tidak dimuatkan pada MySQL 8.4 Dec 09, 2024 am 11:42 AM

Salah satu perubahan utama yang diperkenalkan dalam MySQL 8.4 (keluaran LTS terkini pada 2024) ialah pemalam &quot;Kata Laluan Asli MySQL&quot; tidak lagi didayakan secara lalai. Selanjutnya, MySQL 9.0 mengalih keluar pemalam ini sepenuhnya. Perubahan ini mempengaruhi PHP dan apl lain

Bagaimana untuk membuat jadual MySQL menggunakan PHP? Bagaimana untuk membuat jadual MySQL menggunakan PHP? Jun 04, 2024 pm 01:57 PM

Mencipta jadual MySQL menggunakan PHP memerlukan langkah berikut: Sambung ke pangkalan data. Buat pangkalan data jika ia tidak wujud. Pilih pangkalan data. Buat jadual. Laksanakan pertanyaan. Tutup sambungan.

Tutorial terperinci tentang mewujudkan sambungan pangkalan data menggunakan MySQLi dalam PHP Tutorial terperinci tentang mewujudkan sambungan pangkalan data menggunakan MySQLi dalam PHP Jun 04, 2024 pm 01:42 PM

Cara menggunakan MySQLi untuk mewujudkan sambungan pangkalan data dalam PHP: Sertakan sambungan MySQLi (require_once) Cipta fungsi sambungan (functionconnect_to_db) Fungsi sambungan panggilan ($conn=connect_to_db()) Laksanakan pertanyaan ($result=$conn->query()) Tutup sambungan ( $conn->close())

iOS 18 menambah fungsi album 'Dipulihkan' baharu untuk mendapatkan semula foto yang hilang atau rosak iOS 18 menambah fungsi album 'Dipulihkan' baharu untuk mendapatkan semula foto yang hilang atau rosak Jul 18, 2024 am 05:48 AM

Keluaran terbaharu Apple bagi sistem iOS18, iPadOS18 dan macOS Sequoia telah menambah ciri penting pada aplikasi Photos, yang direka untuk membantu pengguna memulihkan foto dan video yang hilang atau rosak dengan mudah disebabkan pelbagai sebab. Ciri baharu ini memperkenalkan album yang dipanggil "Dipulihkan" dalam bahagian Alat pada apl Foto yang akan muncul secara automatik apabila pengguna mempunyai gambar atau video pada peranti mereka yang bukan sebahagian daripada pustaka foto mereka. Kemunculan album "Dipulihkan" menyediakan penyelesaian untuk foto dan video yang hilang akibat kerosakan pangkalan data, aplikasi kamera tidak disimpan ke pustaka foto dengan betul, atau aplikasi pihak ketiga yang menguruskan pustaka foto. Pengguna hanya memerlukan beberapa langkah mudah

See all articles