PHP Ionic Angularjs Phonegap AJAX Javascript CSS MySQL jQuery Forum

ตัวอย่าง ทบทวนลำดับการทำงาน global ajax event ใน jquery

17 July 2015 By


โค้ดและตัวอย่างต่อไปนี้ เป็นการทบทวนการทำงานของ global ajax event
ใน jquery ซึ่งเราสามารถนำไปประยุกต์ใช้งานเพิ่มเติมได้ 
โดยใน jquery ตั้งแต่เวอร์ชั่น 1.8 ขึ้นไป เราควร ใช้งาน global ajax event
ผูกกับส่วนของ document
 
ดูเนื้อหาเดิมของ global ajax event
 
รู้จักกับ Ajax Events ใน jQuery 
http://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>&nbsp;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 วินาที
?>

Tags:: jquery ajax global ajax event





URL สำหรับอ้างอิง