jQuery – หน้า 32 – PlusMagi's Blog By Pitt Phunsanit

พื้นฐานการส่งข้อมูลจากแบบฟอร์มไปประมวลผลโดย jQuery Ajax ทำได้ง่าย ๆ

องค์ประกอบ

ส่วนประกอบแรกก็คือฟอร์มที่ใช้กรอกข้อมูล
```
<form action="values.php" id="formA" method="post">
...
<input name="socialid" type="text">
...
<button type="submit" class="btn btn-success">ส่งข้อมูล</button>
...</form>
```
ส่วนสำคัญคือ id (id=”formA”) ของฟอร์มที่จะใช้อ้างถึงใน JavaScript
ส่วน JavaScript ที่จะรวบรวมข้อมูลส่งออกไปหาเซิร์ฟเวอร์
```
$ (function () {
 var formA = $ ('#formA') ;

 formA.submit (function (event) {
 event.preventDefault () ;

 $.ajax ({
 "data": formA.serialize () ,
 "method": "POST",
 "success": function (data, textStatus, jqXHR) {
 $ ('#resultA') .html (data) ;
 },
 "url": "values.php",
 }) ;
 }) ;
}) ;
```
data

ข้อมูลที่จะส่งออกไป ตัวอย่างนี้ข้อมูลในแบบฟอร์มจะถูกรวบรวมโดย function .serialize ()

method

คือจะส่งข้อมูลไปหา server แบบ get หรือ post

success

code ในส่วนนี้จะทำงานเมื่อทำงานสำเร็จเท่านั้น

url

เป็น url ที่จะส่งข้อมุลไปหา

ฝั่ง server ที่ทำหน้าที่ประมวลผล

<?php
echo 'GET<pre>', print_r ($_GET, true) , '</pre>';
echo 'POST<pre>', print_r ($_POST, true) , '</pre>';

ส่วนแสดงผล เพราะว่าการส่งแบบ ajax จะส่งไปเป็นแบบ background จึงควรมีการแสดงให้เห็นว่ามีการทำงานเกิดขึ้น ใน code ชุดนี้คือแสดงผลในพื้นที่
```
<div class="col-sm-12" id="resultA"></div>
```

ตัวอย่าง code ที่เขียนเสร็จแล้ว

<!doctype html>
<html>

<head>
 <meta charset="utf-8">
 <title>jQuery: Form Send</title>
 <link href="../vendor/twbs/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" type="text/css">
</head>

<body>
 <h1>พร้อมเพย์ (PromptPay) </h1>
 <form action="values.php" class="form-horizontal" id="formA" method="post">
 <div class="form-group">
 <label class="col-sm-2 control-label">โอนเงินด้วย</label>
 <div class="col-sm-10">
 <div class="radio">
 <label>
 <input checked name="way" type="radio" value="socialid"> หมายเลขบัตรประชาชน
 </label>
 </div>
 <div class="radio">
 <label>
 <input name="way" type="radio" value="phone"> หมายเลขโทรศัพท์
 </label>
 </div>
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label" for="socialidI">หมายเลขบัตรประชาชน</label>
 <div class="col-sm-10">
 <input class="form-control" id="socialidI" maxlength="13" name="socialid" placeholder="หมายเลขบัตรประชาชน" type="number">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label" for="phoneI">หมายเลขโทรศัพท์</label>
 <div class="col-sm-10">
 <input class="form-control" id="phoneI" maxlength="11" name="phone" placeholder="หมายเลขโทรศัพท์" type="tel">
 </div>
 </div>
 <div class="form-group">
 <label for="amount" class="col-sm-2 control-label">จำนวนเงิน</label>
 <div class="col-sm-10">
 <div class="input-group">
 <input class="form-control" id="amount" max="5000" min="0" name="amount" placeholder="จำนวนเงิน" type="number">
 <div class="input-group-addon">&#3647;</div>
 </div>
 </div>
 </div>
 <div class="form-group">
 <div class="col-sm-10 text-right">
 <button type="submit" class="btn btn-success">โอนเงิน</button>
 </div>
 </div>
 </form>
 <div class="col-sm-12" id="resultA"></div>
 <script src="../vendor/components/jquery/jquery.min.js"></script>
 <script>
 $ (function () {
 var formA = $ ('#formA') ;

 formA.submit (function (event) {
 event.preventDefault () ;

 $.ajax ({
 "data": formA.serialize () ,
 "method": "POST",
 "success": function (data, textStatus, jqXHR) {
 $ ('#resultA') .html (data) ;
 },
 "url": "values.php",
 }) ;
 }) ;
 }) ;
 </script>
</body>

</html>

และ code ที่ประมวลผลข้อมูล

<?php
echo 'GET<pre>', print_r ($_GET, true) , '</pre>';
echo 'POST<pre>', print_r ($_POST, true) , '</pre>';

หมวดหมู่: jQuery

jQuery: ส่ง form แบบ ajaxjQuery: ส่ง form แบบ ajax