Tag Archive multiple

Byphunsanit

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

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