jQuery Mobile ตอนที่ 4 การประยุกต์ใช้ Ajax ส่งข้อมูลจาก Form
สำหรับบทเรียนของ jQuery Mobile ในตอนนี้จะเป็นการใช้งานร่วมกับ AJAX มาช่วยในการ Post ข้อมูลจากหน้า Form ไปประมวลผล สำหรับประบุกต์ทำหน้าส่งข้อมูล
jQuery Mobile With Ajax
สำหรับวิธีการใช้งานเบื้องต้นนั้น สามารถกลับไปอ่านพื้นฐานการใช้งานก่อนได้ที่
- jQuery Mobile ตอนที่ 2 เครื่องมือเปลี่ยน Theme เว็บไซต์
- jQuery Mobile ตอนที่ 3 สร้างลูกเล่น Page Transition เชื่อมต่อกัน
ก่อนอื่นให้ไปออกแบบหน้าจอแอพพิเคชันบน Mobile ของเราด้วย Theme Roller ก่อนเลยครับ โดยมีส่วนประกอบ คือ Header, Footer และ Form โดย Form นั้นข้างใน มี Textbox อย่าง name และ Email พร้อมทั้งปุ่ม Submit
ออกแบบด้วย Theme Roller
ไฟล์ท้หมดใน FTP
ทำการตั้งชื่อ Form หรือ id ของ Form ว่า “callPostForm” และตั้งชื่อ id ของ Submit ว่า “Submit” ครับ
ประกาศค่าที่กรอกออกมาที่หน้าจอ
หน้าฟอร์มที่ออกแบบมา
Code ไฟล์ index.php จะมีรูปแบบดังนี้
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>jQuery Mobile Lesson</title> <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> <!-- Extra Codiqa features --> <link rel="stylesheet" href="codiqa.ext.css"> <!-- jQuery and jQuery Mobile --> <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script> <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <!-- Extra Codiqa features --> <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script> </head> <body> <!-- Home --> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h3>Inbound Marketing</h3> </div> <div data-role="content"> <form id="callPostForm"> <div data-role="fieldcontain"> <label for="textinput1"> Name </label> <input name="name" id="name" placeholder="" value="" type="text" data-mini="true"> </div> <div data-role="fieldcontain"> <label for="textinput2"> Email Address </label> <input name="email" id="email" placeholder="" value="" type="text"> </div> <h3 id="notification"></h3> <input id="submit" type="submit" data-theme="b" value="Submit"> </form> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3> Powered by Daydev.com </h3> </div> </div> </body> </html> |
ต่อมาให้ทำหน้า รับข้อมูลจาก Ajax ชื่อว่า “submit.php” โดยมี code ดังนี้
|
1 2 3 4 5 |
<?php $name=$_POST['name']; $email=$_POST['email']; echo 'Name:'.$name.' Email:'.$email.''; ?> |
เป็นการรับค่า Form ของ “name” และ “email” แล้วทำการ Echo ประกาศค่าออกมา
ทำการเพิ่ม Script ของ Javascript เข้าไปแทรก หลัง <BODY> ครับ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<script> function onSuccess(data, status) { data = $.trim(data); $("#notification").text(data); } function onError(data, status) { // handle an error } $(document).ready(function() { $("#submit").click(function(){ var formData = $("#callPostForm").serialize(); $.ajax({ type: "POST", url: "submit.php", cache: false, data: formData, success: onSuccess, error: onError }); return false; }); }); </script> |
เป็นการ Call ฟังก์ชันของ AJAX ถ้าสำเร็จจะมีการประมวลผลลัพธ์ออกมา ดังตัวอย่าง
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <title>jQuery Mobile Lesson</title> <link rel="stylesheet" href="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.css"> <!-- Extra Codiqa features --> <link rel="stylesheet" href="codiqa.ext.css"> <!-- jQuery and jQuery Mobile --> <script src="https://d10ajoocuyu32n.cloudfront.net/jquery-1.9.1.min.js"></script> <script src="https://d10ajoocuyu32n.cloudfront.net/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script> <!-- Extra Codiqa features --> <script src="https://d10ajoocuyu32n.cloudfront.net/codiqa.ext.js"></script> </head> <body> <!--AJAX--> <script> function onSuccess(data, status) { data = $.trim(data); $("#notification").text(data); } function onError(data, status) { // handle an error } $(document).ready(function() { $("#submit").click(function(){ var formData = $("#callPostForm").serialize(); $.ajax({ type: "POST", url: "submit.php", cache: false, data: formData, success: onSuccess, error: onError }); return false; }); }); </script> <!--AJAX--> <!-- Home --> <div data-role="page" id="page1"> <div data-theme="a" data-role="header"> <h3>Inbound Marketing</h3> </div> <div data-role="content"> <form id="callPostForm"> <div data-role="fieldcontain"> <label for="textinput1"> Name </label> <input name="name" id="name" placeholder="" value="" type="text" data-mini="true"> </div> <div data-role="fieldcontain"> <label for="textinput2"> Email Address </label> <input name="email" id="email" placeholder="" value="" type="text"> </div> <h3 id="notification"></h3> <input id="submit" type="submit" data-theme="b" value="Submit"> </form> </div> <div data-theme="a" data-role="footer" data-position="fixed"> <h3> Powered by Daydev.com </h3> </div> </div> </body> </html> |
ลองใส่ข้อมูลตัวอย่างลงไป
สามารถเข้าไปดูตัวอย่างได้ที่ http://www.daydev.com/demo/jquerymobileajax/
หรือดาวน์โหลด Source Code ที่
NO COMMENTS