สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

สำหรับผู้ที่ เริ่มต้น Programming - PHP มีอะไร แนะนำ หรือข้อสงสัยต้องบอร์ด นี้ คนที่มีความรู้ แบ่งปันคนอื่นบ้างนะ ปัญหาการเขียนโปรแกรม แบบ OOP Session Cookies php network

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

สืบเนื่องจาก viewtopic.php?t=92263 ที่ตัว Textarea ไม่สามารถขึ้นบรรทัดใหม่ได้

โดย Keyword ที่ได้รับมาคือทำ ajax ให้ส่ง json กลับมา เพื่อแก้ปัญหา textarea ขึ้นบรรทัดใหม่ และ เวลาเปลี่ยนหน้ากิจกรรม จะไม่ต้อง เปลี่ยน URL ครับ

โดยผมขออนุญาตสอบถามว่า ถ้าจะเริ่ม ทำ ajax ให้ส่ง json ดังกล่าวไป ผมต้องเริ่มที่ตรงไหนครับ

โค้ด: เลือกทั้งหมด

<script>

		
			$(document).ready(function () {

				$('#calendar').fullCalendar({

				
					
					header: {


						left: 'prev,next today',
						center: 'title',
						right: 'month,agendaWeek,agendaDay,listMonth'
					},
				
					navLinks: true,
					defaultDate: '<?php echo$date?>',
					minTime: '00:00:00',
					maxTime: '24:00:00',
					editable: true,
					
					eventLimit: true, 
					selectable: true,
					selectHelper: true,
					select: function (start, end) {

						$('#ModalAdd #start').val(moment(start).format('YYYY-MM-DD HH:mm:ss'));
						$('#ModalAdd #end').val(moment(end).format('YYYY-MM-DD HH:mm:ss'));
						$('#ModalAdd').modal('show');
					},
					eventRender: function  (event, element)  { 
						element.bind('dblclick', function () {
							
							$('.translate').attr('href', 'events_details.php?id='+event.id+'&event_type_id='+event.event_type_id+'&lang=<?php echo $lang ;?>');
							$('#ModalEdit #id').val(event.id);
							$('#ModalEdit #title').val(event.title);
							$('#ModalEdit #detail').val(event.detail);
							$('#ModalEdit #event_type_id').val(event.event_type_id);
							$('#ModalEdit').modal('show');
						});
					}, 
					eventDrop: function (event, delta, revertFunc) { 

						edit(event);

					},
					eventResize: function (event, dayDelta, minuteDelta, revertFunc) { 

						edit(event);

					},
					events: [
			<?php foreach($events as $event):
						$start = explode(" ", $event['start']);
					$end = explode(" ", $event['end']);
					if($start[1] == '00:00:00'){
					$start = $start[0];
				}else {
					$start = $event['start'];
				}
				if ($end[1] == '00:00:00') {
					$end = $end[0];
				} else {
					$end = $event['end'];
				}
			?>
					{
						id: '<?php echo $event['id']; ?>',
						title: '<?php echo $event['title']; ?>',
						detail: '<?php echo $event['detail']; ?>',
						start: '<?php echo $start; ?>',
						end: '<?php echo $end; ?>',
						event_type_id: '<?php echo $event['event_type_id']; ?>',
					},
			<?php endforeach; ?>
			]
			});

			function edit(event) {
				start = event.start.format('YYYY-MM-DD HH:mm:ss');
				if (event.end) {
					end = event.end.format('YYYY-MM-DD HH:mm:ss');
				} else {
					end = start;
				}

				id = event.id;

				Event = [];
				Event[0] = id;
				Event[1] = start;
				Event[2] = end;

				$.ajax({
					url: 'editEventDate.php',
					type: "POST",
					data: { Event: Event },
					success: function (rep) {
						if (rep == 'OK') {
							alert('บันทึก');
						} else {
							alert('Could not be saved. try again.');
						}
					}
				});
			}
		
	});

	

		</script>
ขอบคุณครับ
ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

ลองศึกษาตัวอย่าง ajax ประยุกต์ใช้ ดูครับ
https://www.mindphp.com/developer/18-aj ... ement.html
https://www.mindphp.com/%E0%B8%9A%E0%B8 ... n-php.html
https://www.mindphp.com/%E0%B8%84%E0%B8 ... -json.html
หลัก ๆ มี 2 ส่วนคือไฟล์ที่ใช้ ajax ดึงรับค่าข้อมูล กับไฟล์ที่ดึงข้อมูลจาก database และในการทำเป็น json ก็สร้างตัวแปรที่เก็บ array มาเก็บค่าและใช้ json_encode มาแปลงข้อมูลเป็น ่json ครับ
:gfb:
ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

ตอนนี้เปลี่ยนการส่งข้อมูลมาเป็นแบบ Ajax ตรวจสอบใน console เหมือนจะส่งข้อมูลมาแล้วครับ
2023-01-17 15_53_59-Window.png
2023-01-17 15_53_59-Window.png (79.35 KiB) Viewed 1248 times

index ส่วน Ajax ที่เพิ่มมา

โค้ด: เลือกทั้งหมด

                            $( "#event_type_id" ).change(function() {
					var dataevent = $( "#event_type_id" ).val();
					console.log(dataevent);
					$.ajax({
						type : "POST",
						data : {
							dataevent: dataevent
						} ,
						url: "ajax_event_type.php",
						success: function(data) {
						console.log(data);

Index ส่วน Select ประเภทกิจกรรม

โค้ด: เลือกทั้งหมด

<select class="btn-primary" id="event_type_id" name="event_type_id" onchange="this.form.submit()">
			<option value="0"><?php echo $lang_select_events ?></option>
				<?php
											
				$sql1 = "SELECT event_type_id , event_type_name FROM tools_events_type ";

				$req1 = $bdd->prepare($sql1);
				$req1->execute();
				$events1 = $req1->fetchAll();
				foreach($events1 as $row) {
				$selected = ($event_type_id == $row['event_type_id'])  ?   'selected'  : '' ;
				?>
				<option value="<?php echo  $row['event_type_id'];?>" <?php echo $selected ?>><?= $row['event_type_name'];?></option>
				<?php } ?>
		</select>

ajax_event_type.php

โค้ด: เลือกทั้งหมด

<?php
require_once('../tool-calendar-events/connect.php');

$sel = !empty($_POST['dataevent'])? $_POST['dataevent'] : '';
if(!empty($_POST['dataevent'])){
$sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events
WHERE event_type_id = ".$sel;
        }elseif (empty($_POST['dataevent'])) {
            $sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events"
            ;
        } 
$req = $bdd->prepare($sql);
$req->execute();

$events = $req->fetchAll();

header('Content-type: application/json');
echo json_encode($events);
exit();

แต่หน้าปฏิทินตอนนี้ หากเลือกประเภทกิจกรรมมันไม่ขึ้นแสดงครับ

2023-01-17 16_03_04-Window.png
2023-01-17 16_03_04-Window.png (19.49 KiB) Viewed 1248 times

ผมไม่แน่ใจว่าผิดตรงส่วนไหน ขออนุญาตสอบถามเพิ่มเติมครับ

ขอบคุณครับ
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ไฟล์ ajax_event_type.php มาถูกทางแล้วครับ แต่ต้องจัดรูปแบบข้อมูลให้ตรงกับที่นำไปใช้งานจริงก่อน

ตัวอย่างรูปแบบข้อมูล

โค้ด: เลือกทั้งหมด

[
        {
                id: 1,
                title: 'test...',
                detail: 'test...',
                start: 'test...',
                end: 'test...',
                event_type_id: 'test...'
        },
        {
                id: 2,
                title: 'test...',
                detail: 'test...',
                start: 'test...',
                end: 'test...',
                event_type_id: 'test...'
        }
]

ในส่วนของ javascript ตรง $.ajax ที่เขียนไว้อาจไม่ต้องใช้แล้ว ให้ดูตรง events ของเดิมใช้วิธีการแทรกเป็น php อยู่ ให้เปลี่ยนเป็นใส่ url ของไฟล์ ajax_event_type.php ได้เลย

ตัวอย่าง url

โค้ด: เลือกทั้งหมด

$('#calendar').fullCalendar({
    events: 'http://localhost/xxxx/ajax_event_type.php'
});
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

tsukasaz เขียน: 17/01/2023 7:47 pm ในส่วนของ javascript ตรง $.ajax ที่เขียนไว้อาจไม่ต้องใช้แล้ว ให้ดูตรง events ของเดิมใช้วิธีการแทรกเป็น php อยู่ ให้เปลี่ยนเป็นใส่ url ของไฟล์ ajax_event_type.php ได้เลย
เอาอันนี้ออกเลยใช่ไหมครับ

โค้ด: เลือกทั้งหมด

<script>
	
			
					$( "#event_type_id" ).change(function() {
					var dataevent = $( "#event_type_id" ).val();
					console.log(dataevent);
					$.ajax({
						type : "POST",
						data : {
							dataevent: dataevent
						} ,
						url: "ajax_event_type.php",
						success: function(data) {
						console.log(data);

ผมลองเอาออก และพอเพิ่มในส่วนของ events : เข้าไป หน้าปฏิทินมันหายอีกแล้วครับ

โค้ด: เลือกทั้งหมด

$(document).ready(function () {

				$('#calendar').fullCalendar({
					events: 'http://localhost/tools/tool-calendar-events/ajax_event_type.php'
และขออนุญาตสอบถามในส่วนของ
tsukasaz เขียน: 17/01/2023 7:47 pm

โค้ด: เลือกทั้งหมด

[
 {
 id: 1,
 title: 'test...',
 detail: 'test...',
 start: 'test...',
 end: 'test...',
 event_type_id: 'test...'
 },
 {
 id: 2,
 title: 'test...',
 detail: 'test...',
 start: 'test...',
 end: 'test...',
 event_type_id: 'test...'
 }
]
อันนี้ผมต้องไปเพิ่มในไฟล์ ajax_event_type.php ต่อด้านล่างของ

โค้ด: เลือกทั้งหมด

$events = $req->fetchAll();
ใช่ไหมครับ

ขออนุญาตรบกวนสอบถามครับ ขอบคุณครับบบบบบ
ภาพประจำตัวสมาชิก
tsukasaz
PHP VIP Members
PHP VIP Members
โพสต์: 21991
ลงทะเบียนเมื่อ: 18/04/2012 9:39 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย tsukasaz »

ลำดับการทำ คือ ต้องจัดข้อมูลให้ตรงตามรูปแบบก่อนครับ

ในโค้ดหลังจากที่ดึงข้อมูลจากฐานข้อมูลแล้วไปอยู่ในตัวแปรชื่อ $events ให้วน loop จัดข้อมูล

ตอนทำให้รันไฟล์ ajax_event_type.php ตรงๆ ให้เห็นผลลัพท์ก่อนก็ได้ครับ
The last bug isn't fixed until the last user is dead. (Sidney Markowitz, 1995)
ภาพประจำตัวสมาชิก
[email protected]
PHP VIP Members
PHP VIP Members
โพสต์: 1961
ลงทะเบียนเมื่อ: 21/11/2022 9:20 am

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย [email protected] »

แก้ไขได้แล้วครับ

ajax_event_type.php

โค้ด: เลือกทั้งหมด

<?php
require_once('../tool-calendar-events/connect.php');

$sel = !empty($_POST['dataevent'])? $_POST['dataevent'] : '';
if(!empty($_POST['dataevent'])){
$sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events
WHERE event_type_id = ".$sel;
        }elseif (empty($_POST['dataevent'])) {
            $sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events"
            ;
        } 
$req = $bdd->prepare($sql);
$req->execute();

$events = $req->fetchAll();

header('Content-type: application/json');
echo json_encode($events);
exit();
แล้วก็ไปเปลี่ยนที่แสดงผลตรงปฏิทินไปเรียก ajax_event_type.php มาใช้งานครับ

ของเดิมเป็น

โค้ด: เลือกทั้งหมด

events: [
 <?php foreach($events as $event):
 $start = explode(" ", $event['start']);
 $end = explode(" ", $event['end']);
 if($start[1] == '00:00:00'){
 $start = $start[0];
 }else {
 $start = $event['start'];
 }
 if ($end[1] == '00:00:00') {
 $end = $end[0];
 } else {
 $end = $event['end'];
 }
 ?>
 {
 id: '<?php echo $event['id']; ?>',
 title: '<?php echo $event['title']; ?>',
 detail: '<?php echo $event['detail']; ?>',
 start: '<?php echo $start; ?>',
 end: '<?php echo $end; ?>',
 event_type_id: '<?php echo $event['event_type_id']; ?>',
 },
 <?php endforeach; ?>
 ]
ลบออกทั้งหมด แทนที่ด้วย

โค้ด: เลือกทั้งหมด

events: 'ajax_event_type.php' 
ขอบคุณอีกครั้งมากๆครับ :icon_plusone:
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: สอบถามการทำ ajax ให้ส่ง json กลับมาครับ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

โค้ด: เลือกทั้งหมด

$sel = !empty($_POST['dataevent'])? $_POST['dataevent'] : '';
if(!empty($_POST['dataevent'])){
$sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events
WHERE event_type_id = ".$sel;
        }elseif (empty($_POST['dataevent'])) {
            $sql = "SELECT id, title, detail, start, end, event_type_id FROM tools_events"
            ;
        } 
มีความแปลกของการตรวจสอบเงือนไขนะครับ

และ ควรดัก LIMIT ไว้หน่อยนะครับ สำหรับถ้าข้อมูลเยอะๆ ระบบร่วงได้
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 108