jQuery โหลด Ajax หลายไฟล์พร้อมกัน

Byphunsanit

AJAX, fragment, getJSON, jQuery, multiple, when, หลาย, เจเควียรี, เอแจ็กซ์

jQuery โหลด Ajax หลายไฟล์พร้อมกัน

ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อมๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ user เดิมทีจะใช้วีธี join ตารางเข้าด้วยกันแล้วส่งออกเป็น json ไฟล์เดียว วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก เพราะต้องดึงข้อมูลทั้งหมดใหม่ทุกครั้งทั้งๆ ที่ ตารางโปรโมชั่นและตารางส่วนลดเป็นข้อมูลเดิมทุกครั้ง

วิธีแก้คือ แบ่งข้อมูลออกเป็น json 2 ไฟล์ ในตัวอย่างนี้จะดึงข้อมูลจาก 2 แหล่ง คือ json เก็บข้อมูลเดือน และ json ที่เก็บข้อมูลวันหยุด
holidays.php

<?php
 
$datas = [];
 
$datas[1][0]['date'] = '2016-01-01';
$datas[1][0]['name'] = 'New Year\'s Day';
 
$datas[1][1]['date'] = '2016-01-09';
$datas[1][1]['name'] = 'National Children\'s Day';
 
$datas[1][2]['date'] = '2016-01-16';
$datas[1][2]['name'] = 'Teachers\' Day';
 
$datas[2][0]['date'] = '2016-02-08';
$datas[2][0]['name'] = 'Chinese Lunar New Year\'s Day';
 
$datas[2][1]['date'] = '2016-02-09';
$datas[2][1]['name'] = 'second day of Chinese Lunar New Year';
 
$datas[2][2]['date'] = '2016-02-10';
$datas[2][2]['name'] = 'Third day of Chinese Lunar New Year';
 
$datas[2][3]['date'] = '2016-02-14';
$datas[2][3]['name'] = 'Valentine\'s Day';
 
$datas[2][4]['date'] = '2016-02-22';
$datas[2][4]['name'] = 'Makha Bucha';
 
$datas[3][0]['date'] = '2016-03-20';
$datas[3][0]['name'] = 'March equinox';
 
$datas[4][1]['date'] = '2016-04-06';
$datas[4][1]['name'] = 'Chakri Day';
 
$datas[4][2]['date'] = '2016-04-13';
$datas[4][2]['name'] = 'songkran';
 
$datas[4][3]['date'] = '2016-04-14';
$datas[4][3]['name'] = 'songkran';
 
$datas[4][4]['date'] = '2016-04-15';
$datas[4][4]['name'] = 'songkran';
 
$datas[5][0]['date'] = '2016-05-01';
$datas[5][0]['name'] = 'Labor Day';
 
$datas[5][1]['date'] = '2016-05-02';
$datas[5][1]['name'] = 'Labor Day observed';
 
$datas[5][2]['date'] = '2016-05-05';
$datas[5][2]['name'] = 'Coronation Day';
 
$datas[5][3]['date'] = '2016-05-06';
$datas[5][3]['name'] = 'Coronation Day';
 
$datas[5][4]['date'] = '2016-05-09';
$datas[5][4]['name'] = 'Royal Ploughing Ceremony Day';
 
$datas[5][5]['date'] = '2016-05-20';
$datas[5][5]['name'] = 'Visakha Bucha';
 
$datas[6][0]['date'] = '2016-06-20';
$datas[6][0]['name'] = 'June Solstice';
 
$datas[7][0]['date'] = '2016-07-01';
$datas[7][0]['name'] = 'Mid Year Bank Holiday';
 
$datas[7][1]['date'] = '2016-07-18';
$datas[7][1]['name'] = 'Extra holiday';
 
$datas[7][2]['date'] = '2016-07-19';
$datas[7][2]['name'] = 'Asalha Bucha';
 
$datas[8][0]['date'] = '2016-08-12';
$datas[8][0]['name'] = 'The Queen\'s Birthday';
 
$datas[8][1]['date'] = '2016-08-12';
$datas[8][1]['name'] = 'Mother\'s Day';
 
$datas[9][0]['date'] = '2016-09-22';
$datas[9][0]['name'] = 'september equinox';
 
$datas[10][0]['date'] = '2016-10-23';
$datas[10][0]['name'] = 'Chulalongkorn Day';
 
$datas[10][1]['date'] = '2016-10-24';
$datas[10][1]['name'] = 'Chulalongkorn Day observed';
 
$datas[12][0]['date'] = '2016-12-05';
$datas[12][0]['name'] = 'The King\'s Birthday';
 
$datas[12][1]['date'] = '2016-12-05';
$datas[12][1]['name'] = 'Father\'s Day';
 
$datas[12][2]['date'] = '2016-12-10';
$datas[12][2]['name'] = 'Constitution Day';
 
$datas[12][3]['date'] = '2016-12-12';
$datas[12][3]['name'] = 'Constitution Day observed';
 
$datas[12][4]['date'] = '2016-12-21';
$datas[12][4]['name'] = 'December Solstice';
 
$datas[12][5]['date'] = '2016-12-24';
$datas[12][5]['name'] = 'Christmas Eve';
 
$datas[12][6]['date'] = '2016-12-25';
$datas[12][6]['name'] = 'Christmas Day';
 
$datas[12][7]['date'] = '2016-12-31';
$datas[12][7]['name'] = 'New Year\'s Eve';
 
header('Content-type: application/json; charset=utf-8');
echo json_encode($datas);

เราจะใช้ $.when เช็คว่าโหลด json เสร็จรึยัง จริงๆ มันสามารถเช็คไฟล์รูปแบบอื่นๆได้ด้วย เช่น html หรือ javascript จากนั้นก็นำมารวมกันอีกที เพราะว่าดึงข้อมูลโดยใช้คำสั่ง $.getJSON จะ retuen ค่าออกมาเป็น XMLHttpRequest จึงต้องอ้างถึงข้อมูลโดยใช้ index[0]
multipleAJAX.html

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jQuery: Multiple AJAX and JSON Requests, One Callback</title>
    <meta name="author" content="Pitt Phunsanit">
  </head>
  <body>
    <h1>thai public holidays 2016</h1>
    <div id="calendar"></div>
    <script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
    <script>
      $(function(){
 
        var download1 = $.getJSON('months.php');
        var download2 = $.getJSON('holidays.php');
 
        $.when(download1, download2).done(function (months, holidays) {
 
          console.log(months);
          console.log(holidays);
 
          var html = '';
          $.each(months[0], function(monthKey, month)
          {
 
            html += '<h3>'+month.name+'</h3>';
            html += '<p>'+month.description+'</p>';
 
            if(holidays[0][monthKey] != undefined)
            {
              html += '<dl>';
              $.each(holidays[0][monthKey], function(dateKey, holiday) {
                html += '<dt>'+holiday.date+'</dt>';
                html += '<dd>'+holiday.name+'</dd>';
              });
              html += '</dl>';
            }
 
          });
 
          $('#calendar').append(html);
 
        });
 
      });
    </script>
  </body>
</html>

About the author

phunsanit administrator

Archives

Archives