jQuery-ajax-โหลด-json-data

ใช้งาน Ajax โหลด JSON มาแสดงผ่านภาษาพีเอชพี

ใช้งาน Ajax โหลด JSON มาแสดงผ่านภาษาพีเอชพี



Ajax เป็นหนึ่งในความสามารถของ jQuery ซึ่งเป็น Javascript Framework ที่ได้รับความนิยมอย่างแพร่หลาย ในการนำมาพัฒนาเว็บไซต์ในส่วนของ Front-End จากนักพัฒนาทั่วโลก อีกหนึ่งคุณสมบัติของ Ajax ที่เรามักจะต้องใช้งานอยู่บ่อยครั้งในการเขียนโปรแกรมเว็บไซต์คือการโหลดข้อมูลจากฝั่ง server side มาแสดงในหน้าเพจแบบที่ไม่ต้องมีการ

refresh เปลี่ยนหน้าเพจ ข้อมูลที่ถูกร้องขอ ( Request ) และข้อมูลที่ถูกคืนค่ากลับมา ( Response ) สามารถอยู่ได้ทั้งในรูปแบบ XML หรือ JSON และเมื่อได้ข้อมูลเหล่านี้มาแล้ว เรายังสามารถนำไปจัดการรูปแบบการแสดงผลตามดีไซน์ที่ได้ออกแบบไว้ผ่านคำสั่งของ jQuery อีกได้เช่นกัน

สร้างไฟล์ PHP สำหรับ Response JSON data

เริ่มแรกให้เราสร้งไฟล์ชื่อว่า productMethod.php เพื่อรับข้อมูลตัวแปรจากส่วนของ view และเมื่อเราได้ตัวแปรแล้วอาจจะทำไป query จากฐานข้อมูลหรือตรวจสอบค่าที่ถูกต้องก่อน เสร็จแล้วให้ใช้คำสั่ง json_encode คืนค่าเป็น json กลับมาให้ส่วนของ view นำไปทำงานต่อ ตัวอย่าง php code

ตัวอย่างพีเอชพีโค๊ดด้านบนเป็นตัวอย่างแบบง่าย ๆ ในการทำงานจริงเราอาจจะเปลี่ยนจากข้อมูลที่สร้างขึ้นจากไฟล์ เป็นข้อมูลที่ถูก query ขึ้นมาจากฐานข้อมูลแทน ขั้นตอนต่อไปให้เราสร้างไฟล์ index.html หรือไฟล์ javascript เพื่อใช้คำสั่ง ajax ส่งและโหลดข้อมูล json จาก productMethod.php

ใช้ jQuery Ajax ส่งตัวแปรและรับค่าจาก PHP

หลังจากที่เราได้ไฟล์ php ที่เก็บข้อมูลแบบ json ไว้แล้ว ต่อไปให้เราสร้างไฟล์ index.html และเขียนคำสั่ง jQuery Ajax เพื่อส่งตัวแปรและรับข้อมูล JSON มาแสดง โดยเราสามารถเขียนได้ดังนี้


เรียกใช้งาน jQuery Framework ก่อน

สร้างฟังก์ชั่นสำหรับโหลดข้อมูล JSON



ให้ทดสอบการทำงานโดยรันเว็บไซต์ไปที่ index.html จะเห็นว่าในหน้าต่าง console ส่วนของ developer tool จะเห็นว่าเราได้ข้อมูล json กลับมาในลักษณะนี้
{"name":"iPhone7","company":"Apple Inc.","price":"38,000THB"}
เพียงเท่านี้ เราก็จะสามารถนำข้อมูลไปแสดงในส่วนของ view หรือไฟล์ html และถ้าข้อมูลมีหลายชั่นเราก็สามารถใช้คำสั่ง for in เพื่อเข้าถึงตัวแปรทั้งหมดได้ ตัวอย่างเช่น

ผลลัพธ์ที่ได้เมื่อเราดูที่หน้าต่าง console
jQuery-ajax-โหลด-json-data


เราสามารถใช้คำสั่ง .append(), text(), html(), val() และคำสั่งอื่น ๆ อีกมากมายของ jQuery เพื่อนำข้อมูลที่ได้จาก php json ไปแสดงในหน้าเพจได้ ตามความเหมาะสม

กระทู้ใกล้เคียง

วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไ... วิธีทำเว็บ ให้โหลดเร็ว เทคนิคเพิ่มความเร็วให้เว็บไซต์ วิธีทำเว็บ ให้โหลดเร็ว เคยไหมครับที่คลิกลิงค์ข่าวจาก facebook เพราะอ่านคำโปรยแล้ว อยากจะเข้...
วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ... วิธีทำ Banner ให้เว็บไซต์ แบบเปิดปิดอัตโนมัติ วิธีทำ Banner ดูตัวอย่าง Banner หลาย ๆ เว็บไซต์จำเป็นต้องมีการแสดง Banner เพราะบางทีแบนเนอร...
ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ con... ทำเว็บไซต์ สอน CSS การใช้งาน before, after และ content ทำเว็บไซต์ สอน CSS คงจะเคยผ่านตามากันบ้างแล้วสำหรับนักพัฒนาเว็บไซต์สำหรับ before, after และ...
HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง... HTML5 Video ทำวีดีโอให้เป็นพื้นหลัง อีกหนึ่งเทคนิคการทำเว็บไซต์สมัยใหม่ที่นิยมทำกันมากมายในปัจจุบัน เป็นลูกเล่นการทำเว็บไซต์ที่ดึงดูดผู้เข้าชมเว็บไ...