Home / Developer  / Newbie  / Beginning  / jQuery Mobile ตอนที่ 4 การประยุกต์ใช้ Ajax ส่งข้อมูลจาก Form

jQuery Mobile ตอนที่ 4 การประยุกต์ใช้ Ajax ส่งข้อมูลจาก Form

jQuery Mobile With Ajax

สำหรับบทเรียนของ jQuery Mobile ในตอนนี้จะเป็นการใช้งานร่วมกับ AJAX มาช่วยในการ Post ข้อมูลจากหน้า Form ไปประมวลผล สำหรับประบุกต์ทำหน้าส่งข้อมูล

jQuery Mobile With Ajax

jQuery Mobile With Ajax

สำหรับวิธีการใช้งานเบื้องต้นนั้น สามารถกลับไปอ่านพื้นฐานการใช้งานก่อนได้ที่

ก่อนอื่นให้ไปออกแบบหน้าจอแอพพิเคชันบน Mobile ของเราด้วย Theme Roller ก่อนเลยครับ โดยมีส่วนประกอบ คือ Header, Footer และ Form โดย Form นั้นข้างใน  มี Textbox อย่าง name และ Email พร้อมทั้งปุ่ม Submit

ออกแบบด้วย Theme Roller

ออกแบบด้วย Theme Roller

ไฟล์ท้หมดใน FTP

ไฟล์ท้หมดใน FTP

ทำการตั้งชื่อ Form หรือ id ของ Form ว่า “callPostForm” และตั้งชื่อ id ของ Submit ว่า “Submit” ครับ

ประกาศค่าที่กรอกออกมาที่หน้าจอ

ประกาศค่าที่กรอกออกมาที่หน้าจอ

หน้าฟอร์มที่ออกแบบมา

หน้าฟอร์มที่ออกแบบมา

Code ไฟล์ index.php จะมีรูปแบบดังนี้

ต่อมาให้ทำหน้า รับข้อมูลจาก Ajax ชื่อว่า “submit.php” โดยมี code ดังนี้

เป็นการรับค่า Form ของ “name” และ “email” แล้วทำการ Echo ประกาศค่าออกมา

ทำการเพิ่ม Script ของ Javascript เข้าไปแทรก หลัง <BODY> ครับ

เป็นการ Call ฟังก์ชันของ AJAX ถ้าสำเร็จจะมีการประมวลผลลัพธ์ออกมา ดังตัวอย่าง

ลองใส่ข้อมูลตัวอย่างลงไป

ลองใส่ข้อมูลตัวอย่างลงไป

สามารถเข้าไปดูตัวอย่างได้ที่ http://www.daydev.com/demo/jquerymobileajax/

หรือดาวน์โหลด Source Code ที่

https://github.com/banyapon/jQueryAjaxSubmit

Comments

daydevthailand@gmail.com

อาจารย์ประจำสาขาวิชาการออกแบบเชิงโต้ตอบ และการพัฒนาเกม วิทยาลัยครีเอทีฟดีไซน์ & เอ็นเตอร์เทนเมนต์เทคโนโลยี มหาวิทยาลัยธุรกิจบัณฑิตย์ ,ผู้ก่อตั้ง บริษัท Daydev Co., Ltd, (เดย์เดฟ จำกัด)

Review overview
NO COMMENTS

POST A COMMENT