ก่อนที่จะใช้ jQuery ส่งข้อมูลแบบ ajax ออกไป อาจจะใช้ javascript ทำงานเบื้องต้นก่อนได้ เช่น การตรวจสอบข้อมูล (validation) ว่า user ได้ทำการกรอกข้อมูลตามที่จำเป็นครบรึเปล่า หรือนำข้อมูลออกไปจากแบบฟอร์ม โดยที่ไม่ต้องไปทำในฝั่ง server
ใน jQuery Ajax สามารถทำได้โดยการระบุ “beforeSend” ตาม code ตัวอย่าง
jQuery: advance process before send data
$.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
settings.data += '&ajax=true';
การที่จะแยกข้อมูลออกมาสามารถใช้
get value from query string
var params = new URLSearchParams (settings.data) ;
แบ่งข้อมูลออกมาเป็น array เพื่อใช้ตรวจสอบข้อมูลหรือจะนำไปใช้ในการเปลี่ยนแปลงข้อมูล เช่นเดียวกันก็สามารถ delete ลบข้อมูลที่ไม่ได้การออกไปได้โดยใช้ function
delete data from url
function RemoveParameterFromUrl (url, parameter) {
return url.replace (new RegExp ('^ ([^#]*\?) ( ([^#]*) &) ?' + parameter + ' (\=[^&#]*) ? (&|#|$) ') , '$1$3$5') .replace (/^ ([^#]*) ( (\?) &|\? (#|$)) /, '$1$3$4') ;
}
ตัวอย่าง form เขียนโดยยกกรณีโอนเงินโดยใช้ พร้อมเพย์ (PromptPay) ที่ user จะเลือกได้ว่าจะโอนเงินโดยใช้ บัตรประชาชน หรือหมายเลขโทรศัพท์ของผู้รับแทนที่จะใช้หมายเลขบัญชี
ajax.form.advance.html
<!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
<?php
echo 'GET<pre>', print_r ($_GET, true) , '</pre>';
echo 'POST<pre>', print_r ($_POST, true) , '</pre>';