พื้นฐานการส่งข้อมูลจากแบบฟอร์มไปประมวลผลโดย jQuery Ajax ทำได้ง่ายๆ
องค์ประกอบ
- ส่วนประกอบแรกก็คือฟอร์มที่ใช้กรอกข้อมูล
ajax.form.html 123456<formaction="values.php"id="formA"method="post">...<inputname="socialid"type="text">...<buttontype="submit"class="btn btn-success">ส่งข้อมูล</button>...</form>ส่วนสำคัญคือ id (id=”formA”) ของฟอร์มที่จะใช้อ้างถึงใน JavaScript
- ส่วน JavaScript ที่จะรวบรวมข้อมูลส่งออกไปหาเซิร์ฟเวอร์
send form by ajax 12345678910111213141516$(function() {varformA = $('#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 ที่ทำหน้าที่ประมวลผล
values.php 123<?phpecho'GET<pre>', print_r($_GET, true),'</pre>';echo'POST<pre>', print_r($_POST, true),'</pre>'; - ส่วนแสดงผล เพราะว่าการส่งแบบ ajax จะส่งไปเป็นแบบ background จึงควรมีการแสดงให้เห็นว่ามีการทำงานเกิดขึ้น ใน code ชุดนี้คือแสดงผลในพื้นที่
1
<divclass="col-sm-12"id="resultA"></div>
ตัวอย่าง code ที่เขียนเสร็จแล้ว
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 | <!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">฿</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 ที่ประมวลผลข้อมูล
1 2 3 | <?phpecho 'GET<pre>', print_r($_GET, true), '</pre>';echo 'POST<pre>', print_r($_POST, true), '</pre>'; |