ก่อนที่จะใช้ 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>';