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

<h3>ใช้งาน Ajax โหลด JSON มาแสดงผ่านภาษาพีเอชพี<&sol;h3>&NewLine;<p><&sol;br><br &sol;>&NewLine;Ajax เป็นหนึ่งในความสามารถของ jQuery ซึ่งเป็น Javascript Framework ที่ได้รับความนิยมอย่างแพร่หลาย ในการนำมาพัฒนาเว็บไซต์ในส่วนของ Front-End จากนักพัฒนาทั่วโลก อีกหนึ่งคุณสมบัติของ Ajax ที่เรามักจะต้องใช้งานอยู่บ่อยครั้งในการเขียนโปรแกรมเว็บไซต์คือการโหลดข้อมูลจากฝั่ง server side มาแสดงในหน้าเพจแบบที่ไม่ต้องมีการ<br &sol;>&NewLine;<&excl;--more--><br &sol;>&NewLine;refresh เปลี่ยนหน้าเพจ ข้อมูลที่ถูกร้องขอ &lpar; Request &rpar; และข้อมูลที่ถูกคืนค่ากลับมา &lpar; Response &rpar; สามารถอยู่ได้ทั้งในรูปแบบ XML หรือ JSON และเมื่อได้ข้อมูลเหล่านี้มาแล้ว เรายังสามารถนำไปจัดการรูปแบบการแสดงผลตามดีไซน์ที่ได้ออกแบบไว้ผ่านคำสั่งของ jQuery อีกได้เช่นกัน<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>สร้างไฟล์ PHP สำหรับ Response JSON data<&sol;h4>&NewLine;<p>เริ่มแรกให้เราสร้งไฟล์ชื่อว่า productMethod&period;php เพื่อรับข้อมูลตัวแปรจากส่วนของ view และเมื่อเราได้ตัวแปรแล้วอาจจะทำไป query จากฐานข้อมูลหรือตรวจสอบค่าที่ถูกต้องก่อน เสร็จแล้วให้ใช้คำสั่ง json&lowbar;encode คืนค่าเป็น json กลับมาให้ส่วนของ view นำไปทำงานต่อ ตัวอย่าง php code<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"productMethod&period;php" >&dollar;product&lowbar;id &equals; &dollar;&lowbar;POST&lbrack;'product&lowbar;id'&rsqb;&semi; &sol;&sol; รับค่าตัวแปรที่จะถูกส่งมาจาก ajax &NewLine;if&lpar;isset&lpar;&dollar;product&lowbar;id&rpar;&rpar;&lbrace; &sol;&sol; ตรวจสอบว่ามีการส่งตัวแปรมาจริงหรือไม่ &NewLine;&Tab;&dollar;list &equals; array&lpar; &NewLine;&Tab;&Tab;'name'&equals;&gt&semi;'iPhone7'&comma; &NewLine;&Tab;&Tab;'company'&equals;&gt&semi;'Apple Inc&period;'&comma; &NewLine;&Tab;&Tab;'price'&equals;&gt&semi;'38&comma;000THB'&Tab; &NewLine;&Tab;&rpar;&semi; &NewLine;&Tab;echo json&lowbar;encode&lpar;&dollar;list&rpar;&semi; &sol;&sol; รวมค่าเป็น array และเข้ารหัส json ส่งกลับไป &NewLine;&rcub;<&sol;pre>&NewLine;<p>ตัวอย่างพีเอชพีโค๊ดด้านบนเป็นตัวอย่างแบบง่าย ๆ ในการทำงานจริงเราอาจจะเปลี่ยนจากข้อมูลที่สร้างขึ้นจากไฟล์ เป็นข้อมูลที่ถูก query ขึ้นมาจากฐานข้อมูลแทน ขั้นตอนต่อไปให้เราสร้างไฟล์ index&period;html หรือไฟล์ javascript เพื่อใช้คำสั่ง ajax ส่งและโหลดข้อมูล json จาก productMethod&period;php<br &sol;>&NewLine;<&sol;br><&sol;p>&NewLine;<h4>ใช้ jQuery Ajax ส่งตัวแปรและรับค่าจาก PHP<&sol;h4>&NewLine;<p>หลังจากที่เราได้ไฟล์ php ที่เก็บข้อมูลแบบ json ไว้แล้ว ต่อไปให้เราสร้างไฟล์ index&period;html และเขียนคำสั่ง jQuery Ajax เพื่อส่งตัวแปรและรับข้อมูล JSON มาแสดง โดยเราสามารถเขียนได้ดังนี้<br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;<strong>เรียกใช้งาน jQuery Framework ก่อน<&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;ajax&period;googleapis&period;com&sol;ajax&sol;libs&sol;jquery&sol;3&period;1&period;0&sol;jquery&period;min&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p><strong>สร้างฟังก์ชั่นสำหรับโหลดข้อมูล JSON <&sol;strong><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"index&period;html" >function RequestProductList&lpar;&rpar;&lbrace; &NewLine; var data &equals; &lbrace; &sol;&sol; ตัวแปร data object ไว้สำหรับส่งตัวแปรไปที่ php &NewLine;&Tab;'product&lowbar;id'&colon;1 &NewLine; &rcub;&semi; &NewLine; &dollar;&period;ajax&lpar;&lbrace; &NewLine;&Tab;url&colon; "productMethod&period;php"&comma; &NewLine;&Tab;type&colon; 'POST'&comma; &NewLine;&Tab;data&colon; data&comma; &NewLine;&Tab;dataType&colon;'json'&comma; &sol;&sol; datatype เป็นแบบ son &NewLine;&Tab;success&colon; function&lpar;obj&rpar; &lbrace; &sol;&sol; success คือ callback ฟังก์ชั่น &NewLine;&Tab;&Tab;console&period;log&lpar;JSON&period;stringify&lpar;obj&rpar;&rpar;&semi; &sol;&sol; แสดงข้อมูลที่คืนค่ามาในหน้าต่าง console &NewLine;&Tab;&rcub; &NewLine; &rcub;&rpar;&semi; &NewLine;&rcub; &NewLine;RequestProductList&lpar;&rpar;&semi; &sol;&sol; เรียกใช้งานฟังก์ชั่น<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;ให้ทดสอบการทำงานโดยรันเว็บไซต์ไปที่ index&period;html จะเห็นว่าในหน้าต่าง console ส่วนของ developer tool จะเห็นว่าเราได้ข้อมูล json กลับมาในลักษณะนี้<br &sol;>&NewLine; <span class&equals;"lang&colon;default decode&colon;true crayon-inline " >&lbrace;&&num;8220&semi;name&&num;8221&semi;&colon;&&num;8221&semi;iPhone7&&num;8243&semi;&comma;&&num;8221&semi;company&&num;8221&semi;&colon;&&num;8221&semi;Apple Inc&period;&&num;8221&semi;&comma;&&num;8221&semi;price&&num;8221&semi;&colon;&&num;8221&semi;38&comma;000THB&&num;8221&semi;&rcub;<&sol;span><br &sol;>&NewLine;เพียงเท่านี้ เราก็จะสามารถนำข้อมูลไปแสดงในส่วนของ view หรือไฟล์ html และถ้าข้อมูลมีหลายชั่นเราก็สามารถใช้คำสั่ง for in เพื่อเข้าถึงตัวแปรทั้งหมดได้ ตัวอย่างเช่น<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >for &lpar;var prop in obj&rpar; &lbrace; &NewLine;&Tab;console&period;log&lpar;prop &plus; " &equals; " &plus; obj&lbrack;prop&rsqb;&rpar;&semi; &NewLine;&rcub;<&sol;pre>&NewLine;<p>ผลลัพธ์ที่ได้เมื่อเราดูที่หน้าต่าง console<br &sol;>&NewLine;<img src&equals;"https&colon;&sol;&sol;www&period;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;09&sol;jQuery-ajax-โหลด-json-data&period;png" alt&equals;"jQuery-ajax-โหลด-json-data" &sol;><br &sol;>&NewLine;<&sol;br><br &sol;>&NewLine;เราสามารถใช้คำสั่ง &period;append&lpar;&rpar;&comma; text&lpar;&rpar;&comma; html&lpar;&rpar;&comma; val&lpar;&rpar; และคำสั่งอื่น ๆ อีกมากมายของ jQuery เพื่อนำข้อมูลที่ได้จาก php json ไปแสดงในหน้าเพจได้ ตามความเหมาะสม<&sol;p>&NewLine;