โค้ดและตัวอย่างต่อไปนี้ เป็นการทบทวนการทำงานของ global ajax event
ใน jquery ซึ่งเราสามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้
โดยใน jquery ตั้งแต่เวอร์ชั่น 1.8 ขึ้นไป เราควร ใช้งาน global ajax event
ผูกกับส่วนของ document
ดูเนื้อหาเดิมของ global ajax event
รู้จักกับ Ajax Events ใน jQuery
https://www.ninenik.com/content.php?arti_id=230 via @ninenik
ในตัวอย่างต่อไปนี้ เราจะสมมติกรณ๊ 2 กรณีคือ ทำงานสำเร็จ และทำงานล้มเหลว
ตัวอย่าง
...
โค้ดตัวอย่างทั้งหมด ไฟล์ ajax_global_event.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Global Evant</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<style type="text/css">
/* // css ส่วนการกำหนดให้ icon หมุน*/
.container{background-color:#F7F7F7;}
.glyphicon-refresh{
-animation: spin .7s infinite linear;
-webkit-animation: spin2 .7s infinite linear;
}
@-webkit-keyframes spin2 {
from { -webkit-transform: rotate(0deg);}
to { -webkit-transform: rotate(360deg);}
}
@keyframes spin {
from { transform: scale(1) rotate(0deg);}
to { transform: scale(1) rotate(360deg);}
}
/* // css ส่วนการกำหนดให้ icon หมุน*/
</style>
</head>
<body>
<br><br>
<div class="container">
<br>
<form class="form-inline">
<div class="form-group">
<label for="input_textdata">Name</label>
<input type="text" class="form-control" id="input_textdata"
placeholder="Your name" style="width:250px;">
</div>
<button type="button" id="do_ajax" class="btn btn-primary">Do Ajax</button>
<button type="button" id="do_ajax2" class="btn btn-danger">Do Ajax 2</button>
</form>
<br>
<div class="alert alert-info result" role="alert">...</div>
<div class="log"></div>
<br>
</div>
<script type="text/javascript">
$(function(){
// กรณีทำงานสำเร็จ เรียบร้อย
$("#do_ajax").on("click",function(){
// ส่งข้อมูลแบบ post
$.post("ajax_test.php",{
data1:$("#input_textdata").val() // ข้อมูลที่ส่งไป
},function(data){ // กรณีทำงานสำเร็จ
$(".result").html(data);
});
});
// กรณีทำงานล้มแหลว ทดสอบโดยใส่ชื่อไฟล์ที่ไม่มีอยู่จริง
$("#do_ajax2").on("click",function(){
$.post("ajax_test1.php",{
data1:$("#input_textdata").val()
},function(data){
$(".result").html(data);
});
});
// เมื่อ ajax เริ่มทำงาน
$(document).ajaxStart(function(){
$(".result").html('<span class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Loading...');
$(".log").append("1 Triggered ajaxStart handler.<br>");
});
// เมื่อ ajax ส่งข้อมูล
$(document).ajaxSend(function(){
$(".result").removeClass("alert-info")
.addClass("alert-warning");
$(".log").append("2 Triggered ajaxSend handler.<br>");
});
// เมื่อ ajax เกิดข้อมผิดพลาดหรือล้มเหลว
$(document).ajaxError(function(){
$(".result").removeClass("alert-info")
.removeClass("alert-warning")
.addClass("alert-danger");
setTimeout(function(){
$(".result").removeClass("alert-danger")
.addClass("alert-info")
.html("");
},3000);
$(".log").append("3 Triggered ajaxError handler.<br>");
});
// เมื่อ ajax ส่งข้อมูลสำเร็จ เรียบร้อย
$(document).ajaxSuccess(function(){
$(".result").removeClass("alert-info")
.removeClass("alert-warning")
.addClass("alert-success");
setTimeout(function(){
$(".result").removeClass("alert-success")
.addClass("alert-info");
},3000);
$(".log").append("4 Triggered ajaxSuccess handler.<br>");
});
// เมื่อ ajax ทำงานเสร็จทั้งกรณีที่ล้มแหลว หรือ สำเร็จ
$(document).ajaxComplete(function(){
$(".result").removeClass("alert-info")
.removeClass("alert-warning")
.addClass("alert-success");
setTimeout(function(){
$(".result").removeClass("alert-success")
.addClass("alert-info");
},3000);
$(".log").append("5 Triggered ajaxComplete handler.<br>");
});
// เมื่อ ajax สิ้นสุดการทำงาน
$(document).ajaxStop(function(){
$(".log").append("6 Triggered ajaxStop handler.<br><hr>");
});
});
</script>
</body>
</html>
โค้ดไฟล์ ajax_test.php
<?php
header("Content-type:text/html; charset=UTF-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
if(isset($_POST['data1']) && $_POST['data1']!=""){
echo $_POST['data1']." at ".date("Y-m-d H:i:s");
}else{
echo "test at ".date("Y-m-d H:i:s");
}
sleep(2); // หน่วงเวลา 2 วินาที
?>
เนื้อหาที่เกี่ยวข้อง