JavaScript ดึงข้อมูลจาก Database MySQL MariaDB

JavaScript ดึงข้อมูลจาก Database MySQL MariaDB บทความนี้สอนใช้ jQuery Framework ดึงข้อมูลจาก Database MySQL หรือ MariaDB โดยใช้ภาษา PHP ทำงานร่วมกัน สามารถเขียนโปรแกรมได้ดังนี้

ตัวอย่าง ข้อมูลในตาราง book ใน Database ชื่อ example

+----+------------+--------+
| id | title      | price  |
+----+------------+--------+
|  2 | CSS        | 110.00 |
|  1 | HTML&HTML5 | 110.00 |
| 15 | Java       | 180.00 |
| 12 | PHP        | 130.00 |
|  7 | Python     | 200.00 |
+----+------------+--------+

ตัวอย่าง JavaScript ดึงข้อมูลจาก Database MySQL MariaDB

<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>

<!-- ไฟล์ index.html -->
<center>
<div id="data"></div>
<input type="button" id="btn" value="JavaScript ดึงข้อมูลจาก Database">
</center>

<script>
    $("#btn").click(function(){
        $.get( "select.php", function( data ) {
            $( "#data" ).html( data );
        });  
    });
</script>

<?php
	// ไฟล์ select.php
    $return = "<meta charset='UTF-8'>";
    $c = mysqli_connect("localhost", "root", "", "example");
    mysqli_query( $c, "SET NAMES UTF8" );

    $sql = " SELECT * FROM book ";
    $q = mysqli_query( $c, $sql );
    while( $f = mysqli_fetch_assoc( $q ) ) {
        $return .= $f['id']." / ".$f['title']."<br/>";
    }
    
    mysqli_close( $c );
    echo $return;
?>

ผลลัพธ์

1 / HTML&HTML5
2 / CSS
7 / Python
12 / PHP
15 / Java

JavaScript ดึงข้อมูลจาก Database MySQL MariaDB ที่ไฟล์ index.html จะติดตั้ง jQuery และสร้างปุ่ม button พร้อม div สำหรับแสดงข้อมูลจาก Database เมื่อผู้ใช้งานกดปุ่ม โปรแกรมจะเข้าไปทำงานในฟังก์ชัน $( "#btn" ).click เพื่อไปประมวลผลต่อที่ไฟล์ select.php พร้อมกับรับค่าที่ตัวแปร data และแสดงที่ div id = data ด้วยคำสั่ง html โดยในไฟล์ select.php คือภาษา PHP ที่เขียนโค้ดเชื่อมต่อกับฐานข้อมูล MySQL หรือ MariaDB พร้อมกับใช้คำสั่ง SELECT เพื่อดึงข้อมูลจาก Database MySQL MariaDB และส่งข้อมูลกลับมาที่ไฟล์ index.html เป็นการใช้ JavaScript ดึงข้อมูลจาก Database ด้วย jQuery Framework และ PHP