พื้นฐานการส่งข้อมูลจากแบบฟอร์มไปประมวลผลโดย jQuery Ajax ทำได้ง่ายๆ
องค์ประกอบ
- ส่วนประกอบแรกก็คือฟอร์มที่ใช้กรอกข้อมูล
<form action="values.php" id="formA" method="post"> ... <input name="socialid" type="text"> ... <button type="submit" class="btn btn-success">ส่งข้อมูล</button> ...</form>
ส่วนสำคัญคือ id (id=”formA”) ของฟอร์มที่จะใช้อ้างถึงใน JavaScript
- ส่วน JavaScript ที่จะรวบรวมข้อมูลส่งออกไปหาเซิร์ฟเวอร์
$(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", }); }); });- data
- ข้อมูลที่จะส่งออกไป ตัวอย่างนี้ข้อมูลในแบบฟอร์มจะถูกรวบรวมโดย function .serialize()
- method
- คือจะส่งข้อมูลไปหา server แบบ get หรือ post
- success
- code ในส่วนนี้จะทำงานเมื่อทำงานสำเร็จเท่านั้น
- url
- เป็น url ที่จะส่งข้อมุลไปหา
- ฝั่ง server ที่ทำหน้าที่ประมวลผล
<?php echo 'GET<pre>', print_r($_GET, true), '</pre>'; echo 'POST<pre>', print_r($_POST, true), '</pre>';
- ส่วนแสดงผล เพราะว่าการส่งแบบ ajax จะส่งไปเป็นแบบ background จึงควรมีการแสดงให้เห็นว่ามีการทำงานเกิดขึ้น ใน code ชุดนี้คือแสดงผลในพื้นที่
<div class="col-sm-12" id="resultA"></div>
ตัวอย่าง code ที่เขียนเสร็จแล้ว
<!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 ที่ประมวลผลข้อมูล
<?php echo 'GET<pre>', print_r($_GET, true), '</pre>'; echo 'POST<pre>', print_r($_POST, true), '</pre>';