ก่อนที่จะใช้ jQuery ส่งข้อมูลแบบ ajax ออกไป อาจจะใช้ javascript ทำงานเบื้องต้นก่อนได้ เช่น การตรวจสอบข้อมูล (validation) ว่า user ได้ทำการกรอกข้อมูลตามที่จำเป็นครบรึเปล่า หรือนำข้อมูลออกไปจากแบบฟอร์ม โดยที่ไม่ต้องไปทำในฝั่ง server
ใน jQuery Ajax สามารถทำได้โดยการระบุ “beforeSend” ตาม code ตัวอย่าง
jQuery: advance process before send data
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 | $.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
add new data
1 | settings.data += '&ajax=true'; |
การที่จะแยกข้อมูลออกมาสามารถใช้
get value from query string
1 | var params = new URLSearchParams(settings.data); |
แบ่งข้อมูลออกมาเป็น array เพื่อใช้ตรวจสอบข้อมูลหรือจะนำไปใช้ในการเปลี่ยนแปลงข้อมูล เช่นเดียวกันก็สามารถ delete ลบข้อมูลที่ไม่ได้การออกไปได้โดยใช้ function
delete data from url
1 2 3 | function RemoveParameterFromUrl(url, parameter) { return url.replace(new RegExp('^([^#]*\?)(([^#]*)&)?' + parameter + '(\=[^&#]*)?(&|#|$)'), '$1$3$5').replace(/^([^#]*)((\?)&|\?(#|$))/, '$1$3$4');} |
ตัวอย่าง form เขียนโดยยกกรณีโอนเงินโดยใช้ พร้อมเพย์ (PromptPay) ที่ user จะเลือกได้ว่าจะโอนเงินโดยใช้ บัตรประชาชน หรือหมายเลขโทรศัพท์ของผู้รับแทนที่จะใช้หมายเลขบัญชี
ajax.form.advance.html
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 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 | <!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 แก้ข้อมูลที่ส่งไป
values.php
1 2 3 | <?phpecho 'GET<pre>', print_r($_GET, true), '</pre>';echo 'POST<pre>', print_r($_POST, true), '</pre>'; |