MENU
mobile-logo
Home / Developer  / Newbie  / Beginning  / jQuery Mobile ตอนที่ 4 การประยุกต์ใช้ Ajax ส่งข้อมูลจาก Form
Beginning Developer jQuery Newbie PHP Programming Language Social Media Marketing

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

3:38 AM
0
2063Views
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 จะมีรูปแบบดังนี้

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 ดังนี้

PHP
1
2
3
4
5
<?php
$name=$_POST['name'];
$email=$_POST['email'];
echo 'Name:'.$name.' Email:'.$email.'';
?>

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

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

Java
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 ถ้าสำเร็จจะมีการประมวลผลลัพธ์ออกมา ดังตัวอย่าง

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
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 ที่

https://github.com/banyapon/jQueryAjaxSubmit

Comments

POST TAGS:

daydevthailand@gmail.com

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

Review overview
NO COMMENTS

POST A COMMENT