เจเควียรี – หน้า 3 – PlusMagi's Blog By Pitt Phunsanit

ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อมๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ 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>

Tag Archive เจเควียรี

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

Recent Posts