jQuery – หน้า 18 – 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