ทำงานที่ต้องดึงข้อมูลจากหลายตารางพร้อมๆ กัน มีตารางโปรโมชั่น ตารางส่วนลด และตารางเก็บข้อมูลทำรายการของแต่ละ user เดิมทีจะใช้วีธี join ตารางเข้าด้วยกันแล้วส่งออกเป็น json ไฟล์เดียว วิธีนี้ไม่มีประสิทธิภาพเท่าไหร่นัก เพราะต้องดึงข้อมูลทั้งหมดใหม่ทุกครั้งทั้งๆ ที่ ตารางโปรโมชั่นและตารางส่วนลดเป็นข้อมูลเดิมทุกครั้ง
วิธีแก้คือ แบ่งข้อมูลออกเป็น json 2 ไฟล์ ในตัวอย่างนี้จะดึงข้อมูลจาก 2 แหล่ง คือ json เก็บข้อมูลเดือน และ json ที่เก็บข้อมูลวันหยุด
<?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);
<?php $datas = []; $datas[1]['name'] = 'January'; $datas[1]['description'] = 'Janus, Roman god of doors, beginnings, sunset and sunrise, had one face looking forward and one backward'; $datas[2]['name'] = 'February'; $datas[2]['description'] = 'On February 15 the Romans celebrated the festival of forgiveness for sins; (februare, Latin to purify)'; $datas[3]['name'] = 'March'; $datas[3]['description'] = 'Mars, the Roman god of war'; $datas[4]['name'] = 'April'; $datas[4]['description'] = 'Roman month Aprilis, perhaps derived from aperire, (Latin to open, as in opening buds and blossoms) or perhaps from Aphrodite, original Greek name of Venus'; $datas[5]['name'] = 'May'; $datas[5]['description'] = 'Maia, Roman goddess, mother of Mercury by Jupiter and daughter of Atlas'; $datas[6]['name'] = 'June'; $datas[6]['description'] = 'Juno, chief Roman goddess'; $datas[7]['name'] = 'July'; $datas[7]['description'] = 'Renamed for Julius Caesar in 44 BC, who was born this month; Quintilis, Latin for fifth month, was the former name (the Roman year began in March rather than January)'; $datas[8]['name'] = 'August'; $datas[8]['description'] = 'Formerly Sextilis (sixth month in the Roman calendar);re-named in 8 BC for Augustus Caesar'; $datas[9]['name'] = 'September'; $datas[9]['description'] = 'September, (septem, Latin for 7) the seventh month in the Julian or Roman calendar, established in the reign of Julius Caesar'; $datas[10]['name'] = 'October'; $datas[10]['description'] = 'Eighth month (octo, Latin for 8) in the Julian (Roman) calendar. The Gregorian calendar instituted by Pope Gregory XIII established January as the first month of the year'; $datas[11]['name'] = 'November'; $datas[11]['description'] = 'Ninth Roman month (novem, Latin for 9). Catholic countries adopted the Gregorian calendar in 1582, skipping 10 days that October, correcting for too many leap years'; $datas[12]['name'] = 'December'; $datas[12]['description'] = 'Julian (Roman) year\'s tenth month (decem, Latin for 10)'; header('Content-type: application/json; charset=utf-8'); echo json_encode($datas);
เราจะใช้ $.when เช็คว่าโหลด json เสร็จรึยัง จริงๆ มันสามารถเช็คไฟล์รูปแบบอื่นๆได้ด้วยเช่น html หรือ javascript จากนั้นก็นำมารวมกันอีกที เพราะว่าดึงข้อมูลโดยใช้คำสั่ง $.getJSON จะ retuen ค่าออกมาเป็น XMLHttpRequest จึงต้องอ้างถึงข้อมูลโดยใช้ index [0]
<!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>