PHP ขั้นสูงดึงข้อมูลแบบ ใช้ AJax ด้วย JQuery ผสมผสานกับ MySQL

PHP ขั้นสูงดึงข้อมูลแบบ ใช้ AJax ด้วย JQuery ผสมผสานกับ MySQL

ครั้ง

ก่อนอื่นโหลดไฟล์ Jquery มาก่อนแล้วเรียกเข้ามาในหน้านี้ หรือ ไปดึงจาก google ได้ที่ https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js
User Interface ประกอบด้วย 1.ปุ่มสำหรับกดโหลดข้อมูล จาก database 2.แทก div ชื่อ divresult สำหรับแสดงผล html
Javascript 1.เมื่อคลิกปุ่มจะแสดงคำว่า loading.......... (หรือประยุกต์เป็น animation image ก็ได้) 2.เรียกใช้คำสั่ง JQuery ajax ด้วยคำสั่ง $.ajax กรณีนี้จะไปดึงข้อมูลจาก getproductlist.php
หน้า getproductlist.php ทำอะไรบ้าง 1. ดึงข้อมูลสินค้าจาก table products
หน้า getproductlist.php ทำอะไรบ้าง (ต่อ) 2. นำข้อมูลที่ดึงจาก database มาแสดงใน table ของ bootstrap 3.ส่งค่ากลับไปให้หน้า ajax
ทดสอบใช้งาน 1.กดปุ่ม Load
2.หน้าจอจะแสดง Loading.......... (ซึ่งหมายถึงกำลังดึงข้อมูลนะ .. ขอเวลาอีกไม่นาน อีดใจเดียว)

และแล้ว

ระบบก็จะไปดึงข้อมูลจากหน้าที่เราเรียก (getproductlist.php) และมาแสดงผลใน divresult ซึ่งหน้าเว็บไม่มีการ refresh เลยนะครับ อลังการงานสร้างมาก !

ช่องของเรา