หลังจากที่ได้เรียน React มาแล้ว มาดูวิธีการใช้ Jquery ดึงข้อมูลจาก Server ด้วย Ajax กันครับ

Step แรกติดตั้ง Jquery ลงในโปรเจคของเราก่อนไปที่ Folder ของโปรเจคเราใน Terminal แล้วพิมพ์คำสั่ง

เท่านี้เราก็สามารถใช้งาน Jquery ได้แล้ว หลังจากนั้นเราจะมาลอง Get Data กัน โดยสร้างไฟล์ Json.php ไว้ที่ Host ของเรา

ดู Code ส่วนที่ Hilight

จุดสำคัญอยู่ที่ Header หากไม่กำหนดเวลา Jquery เรียกโดย Json จะทำให้ติด security ทำให้ไม่สามารถเรียกได้ หากไม่มีเวลาเรียกใช้งานจะเกิด Error ดังรูปภาพข้างล่าง

screen-shot-2016-11-26-at-11-38-46-pm

ต่อมาเป็นส่วนของ Jquery ในบทความนี้ผมขออนุญาติเอา React-fundamental มาต่อยอดครับโดยการเอา Ajax ไปใส่ใน Component Main แล้วใส่ใน Event componentDidMount คือเวลาตอนนี้ React กำลังสร้าง Dom ให้ไป Get ผ่าน Ajax แล้วนำค่ามาแสดง

ดู Code ส่วนที่ Hilight

ส่วนแรกตามสูตร React ที่เราเรียนกันมาจะใช้อะไรก็ตามต้อง Import ก่อน เราก็ Import Jquery เข้ามา

ส่วนต่อไปก็เรียกใช้งาน ajax ธรรมดาตาม Doc ในเว็บ Jquery เลย

  • Method สามารถใส่ Get หรือ Post ก็ได้
  • Datatype ใช้เป็น Json  เพราะเราจะดึงค่ามาเป็น Json
  • Url คือปลายทางที่เราจะไปดึงหรืออาจจะเป็น Link Api
  • data ในบทความนี่ไม่จำเป็นต้องใช่แต่ใส่ให้ดูเป็นตัวอย่างในกรณีที่ต้องการส่งตัวแปรไปเพื่อกำหนดค่าต่างๆในการ Query ข้อมูลกลับออกมา

ผลลัพธ์

screen-shot-2016-11-26-at-11-45-35-pm

เราก็จะได้ค่า Json ที่เราดึงมาเอามาแสดงใน Log โดยในบทความนี้จะ Log ให้ดู 2 ตัว

1 Log ออกมาทั้งก้อน

2 Log ค่าที่อยู่ใน Key ออกมา

หลังจากนั้นก็ใช้ความรู้ที่เราเรียนมาก่อนหน้านั้นเอาตัวแปรๆต่างๆไป Map ต่อได้เลยครับ หรือจะเอาไปทำ Request ส่งไป Save ค่าก็ได้ครับ