Ajax คือ การส่ง request ไปยัง server แล้วตอบกลับข้อมูลที่เราต้องการ โดยการตอบกลับข้อมูลนั้นไม่ต้องทำการรีเฟรชหน้าจอ ซึ่งทำให้การโหลดข้อมูลนั้นรวดเร็วมาก โดย ajax นั้นจะเขียนโดยใช้ javascript ในการควบคุมการทำงานทั้งหมด ซึ่งบทความนี้นำเสนอ วิธีการสร้าง select tag ขึ้นมา โดยเมื่อเลือกรายการภายในนั้น แล้วจะทำการแสดงรูปภาพตามที่เลือกไว้ เมื่อทำการเลือก select tag อีกครั้ง รุปภาพผลลัพธ์ก็จะเปลี่ยนตามเช่นกัน โดยคำสั่ง
คำสั่งเลือกทีมชาติ
โค้ด: เลือกทั้งหมด
<select class="form selteam" name="selteam" >
<option value="1">ทีมชาติไทย</option>
<option value="2">ทีมชาติเวียดนาม</option>
</select>
คำสั่ง เมื่อทำการเลือกทีมแล้ว จะทำการส่ง value ซึ่งเป็น id ของ ทีมนั้นๆ ไปหน้า selectteam.php
โค้ด: เลือกทั้งหมด
$(".selteam").change(function(){
var team_id = $(".selteam").val();
$.ajax({
type: "POST",
url: "selectteam.php",
data:{team : team_id},
success: function(data){
$.each(data, function() {
var team_logo = (this.team_logo);
var coach_image = (this.coach_image);
$('.logo_team img').attr("src", "teamlogo_image/"+team_logo+"");
$('.namecoach img').attr("src", "coach_image/"+coach_image+"");
});
}
});
});
โค้ด: เลือกทั้งหมด
<?php
require_once 'conn.php';
$team = $_POST["team"];
$sql_ajax_team = "SELECT * FROM $datalineup_team AS team
INNER JOIN $datalineup_coach AS coach ON team.team_id = coach.team_id
WHERE team.team_id = $team";
$result_ajax_team = mysqli_query($con,$sql_ajax_team);
$rowteam = '';
$setposi = array();
while ($rowteam = mysqli_fetch_assoc($result_ajax_team)) {
$setposi[] = $rowteam;
}
header('Content-type: application/json');
echo json_encode($setposi);
exit();
?>
โค้ด: เลือกทั้งหมด
<div class="drag-container" align="center" >
<div class="logo_team" style="display:none;">
<img class="logoteam" src="">
</div>
<div class="namecoach" style="display:none;">
<img class="coachimage" src="">
<p></p>
</div>
โค้ด: เลือกทั้งหมด
.logo_team {
width: 18%;
position: relative;
float: left;
border-bottom-right-radius: 20px;
box-shadow: 4px 4px 10px 0px black;
background-color: rgb(15, 46, 83);
}
.logo_team img {
width: 125px;
height: 160px;
}
.namecoach {
box-shadow: -4px 4px 10px 0px black;
position: relative;
padding-top: 1%;
float: right;
border-bottom-left-radius: 20px;
width: 18%;
text-shadow: 1px 1px 1px #000;
background-color: rgb(15, 46, 83);
}
.namecoach img {
width: 80px;
border-radius: 10px;
box-shadow: 0px 0px 7px 0px black;
}
.namecoach p{
font-size: 15px;
color: white;
}
ผลลัพธที่ได้
เป็นอย่างไรสำหรับการใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง ซึ่งสามารถใช้วิธีนี้ไปประยุกต์ใช้กับงานอื่น ๆ เช่น เปลี่ยนจาก function change() เป็น function click() เพื่อใช้งานกับปุ่มกด แทน เป็นต้น หวังว่าบทความนี้จะเกิดประโยชน์ต่อท่านที่เข้ามาอ่านกันนะครับ
ศึกษาเพิ่มเติม
บทเรียน HTML5 (เอชทีเอ็มแอลห้า)
บทเรียน CSS (ซีเอสเอส)
เขียนโปรแกรม เบื้องต้น
บทความแชร์ความรู้ CSS
บทเรียน AJAX
บทเรียน Javascript
ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS HTML JavaScript & Jquery Ajax สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS
ถามตอบ JavaScript & Jquery Ajax