ก่อนที่จะใช้ jQuery ส่งข้อมูลแบบ ajax ออกไป อาจจะใช้ javascript ทำงานเบื้องต้นก่อนได้เช่น การตรวจสอบข้อมูล (validation) ว่า user ได้ทำการกรอกข้อมูลตามที่จำเป็นครบรึเปล่า หรือนำข้อมูลออกไปจากแบบฟอร์ม โดยที่ไม่ต้องไปทำในฝั่ง server
ใน jQuery Ajax สามารถทำได้โดยการระบุ “beforeSend” ตาม code ตัวอย่าง
$.ajax({ "beforeSend": function(jqXHR, settings) { /* ใส่ตัวแปรเข้าไปเพิ่ม */ settings.data += '&ajax=true'; /* แยกตัวแปรไว้ตรวจสอบข้อมูล */ var params = new URLSearchParams(settings.data); /* บังคับกรอกข้อมูล */ if (params.get('way') == 'socialid' && params.get('socialid') == '') { jqXHR.abort(); alert('กรุณากรอกหมายเลขบัตรประชาชน'); return false; } else if (params.get('way') == 'phone' && params.get('phone') == '') { jqXHR.abort(); alert('กรุณากรอกหมายเลขโทรศัพท์'); return false; } if (params.get('amount') == '') { jqXHR.abort(); alert('กรุณากรอกจำนวนเงิน'); return false; } /* เอาข้อมูลที่ไม่ต้องการส่งออก */ settings.data = RemoveParameterFromUrl(settings.data, 'way'); settings.data = RemoveParameterFromUrl(settings.data, 'way'); if (params.get('way') == 'socialid') { settings.data = RemoveParameterFromUrl(settings.data, 'phone'); } else { settings.data = RemoveParameterFromUrl(settings.data, 'socialid'); } }, "data": formA.serialize(), "method": "POST", "success": function(data, textStatus, jqXHR) { $('#resultA').html(data); }, "url": "values.php", });
เราจะดูข้อมูลที่รวบรวมมาได้ใน object settings.data และสามารถต่อ string เพิ่มเข้าไปได้เหมือนการต่อ string
settings.data += '&ajax=true';
การที่จะแยกข้อมูลออกมาสามารถใช้
var params = new URLSearchParams(settings.data);
แบ่งข้อมูลออกมาเป็น array เพื่อใช้ตรวจสอบข้อมูลหรือจะนำไปใช้ในการเปลี่ยนแปลงข้อมูล เช่นเดียวกันก็สามารถ delete ลบข้อมูลที่ไม่ได้การออกไปได้โดยใช้ function
function RemoveParameterFromUrl(url, parameter) { return url.replace(new RegExp('^([^#]*\?)(([^#]*)&)?' + parameter + '(\=[^&#]*)?(&|#|$)'), '$1$3$5').replace(/^([^#]*)((\?)&|\?(#|$))/, '$1$3$4'); }
ตัวอย่าง form เขียนโดยยกกรณีโอนเงินโดยใช้ พร้อมเพย์ (PromptPay) ที่ user จะเลือกได้ว่าจะโอนเงินโดยใช้ บัตรประชาชน หรือหมายเลขโทรศัพท์ของผู้รับแทนที่จะใช้หมายเลขบัญชี
<!doctype html> <html> <head> <meta charset="utf-8"> <title>jQuery: Advance 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 RemoveParameterFromUrl(url, parameter) { return url.replace(new RegExp('^([^#]*\?)(([^#]*)&)?' + parameter + '(\=[^&#]*)?(&|#|$)'), '$1$3$5').replace(/^([^#]*)((\?)&|\?(#|$))/, '$1$3$4'); } $(function () { var formA = $('#formA'); formA.submit(function (event) { event.preventDefault(); $.ajax({ "beforeSend": function (jqXHR, settings) { /* ใส่ตัวแปรเข้าไปเพิ่ม */ settings.data += '&ajax=true'; /* แยกตัวแปรไว้ตรวจสอบข้อมูล */ var params = new URLSearchParams(settings.data); /* บังคับกรอกข้อมูล */ if (params.get('way') == 'socialid' && params.get('socialid') == '') { jqXHR.abort(); alert('กรุณากรอกหมายเลขบัตรประชาชน'); return false; } else if (params.get('way') == 'phone' && params.get('phone') == '') { jqXHR.abort(); alert('กรุณากรอกหมายเลขโทรศัพท์'); return false; } if (params.get('amount') == '') { jqXHR.abort(); alert('กรุณากรอกจำนวนเงิน'); return false; } /* เอาข้อมูลที่ไม่ต้องการส่งออก */ settings.data = RemoveParameterFromUrl(settings.data, 'way'); settings.data = RemoveParameterFromUrl(settings.data, 'way'); if (params.get('way') == 'socialid') { settings.data = RemoveParameterFromUrl(settings.data, 'phone'); } else { settings.data = RemoveParameterFromUrl(settings.data, 'socialid'); } }, "data": formA.serialize(), "method": "POST", "success": function (data, textStatus, jqXHR) { $('#resultA').html(data); }, "url": "values.php", }); }); }); </script> </body> </html>
และฝั่ง server side ที่ควรจะมีการ validation ตรวจสอบข้อมูลซ้ำอีกครั้งเพื่อความมั่นใจ แต่ตัวอย่างนี้จะแสดงข้อมูลที่ทางฝั่ง server ได้รับเท่านั้น เพื่อให้เห็นการ edit แก้ข้อมูลที่ส่งไป
<?php echo 'GET<pre>', print_r($_GET, true), '</pre>'; echo 'POST<pre>', print_r($_POST, true), '</pre>';