การใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

User avatar
bankjittapol
PHP Super Member
PHP Super Member
Posts: 344
Joined: 21/10/2019 10:19 am

การใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง

Post by bankjittapol » 30/11/2019 7:13 pm

การใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง
Ajax คือ การส่ง request ไปยัง server แล้วตอบกลับข้อมูลที่เราต้องการ โดยการตอบกลับข้อมูลนั้นไม่ต้องทำการรีเฟรชหน้าจอ ซึ่งทำให้การโหลดข้อมูลนั้นรวดเร็วมาก โดย ajax นั้นจะเขียนโดยใช้ javascript ในการควบคุมการทำงานทั้งหมด ซึ่งบทความนี้นำเสนอ วิธีการสร้าง select tag ขึ้นมา โดยเมื่อเลือกรายการภายในนั้น แล้วจะทำการแสดงรูปภาพตามที่เลือกไว้ เมื่อทำการเลือก select tag อีกครั้ง รุปภาพผลลัพธ์ก็จะเปลี่ยนตามเช่นกัน โดยคำสั่ง


คำสั่งเลือกทีมชาติ

Code: Select all

  <select class="form selteam" name="selteam" >
               <option value="1">ทีมชาติไทย</option>
               <option value="2">ทีมชาติเวียดนาม</option>
            </select>

คำสั่ง เมื่อทำการเลือกทีมแล้ว จะทำการส่ง value ซึ่งเป็น id ของ ทีมนั้นๆ ไปหน้า selectteam.php

Code: Select all

 
  $(".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+"");
                            
                          });
                        }
                      });
                    });
selectteam.php จะทำการ select ข้อมูลจากฐานข้อมูล โดยดึงข้อมูล ทีมชาติ และโค้ช ตามที่เลือกออกมาแล้วส่งไปหน้าเดิม เป็น json

Code: Select all

<?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();
?>
ส่วนแสดงผล เมื่อทำการเลือกทีม

Code: Select all

  <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>
CSS ที่ใช้

Code: Select all

.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;

}



ผลลัพธที่ได้
12323123212.gif
12323123212.gif (204.25 KiB) Viewed 472 times
เป็นอย่างไรสำหรับการใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง ซึ่งสามารถใช้วิธีนี้ไปประยุกต์ใช้กับงานอื่น ๆ เช่น เปลี่ยนจาก function change() เป็น function click() เพื่อใช้งานกับปุ่มกด แทน เป็นต้น หวังว่าบทความนี้จะเกิดประโยชน์ต่อท่านที่เข้ามาอ่านกันนะครับ

ศึกษาเพิ่มเติม
บทเรียน HTML5 (เอชทีเอ็มแอลห้า)
บทเรียน CSS (ซีเอสเอส)
เขียนโปรแกรม เบื้องต้น
บทความแชร์ความรู้ CSS
บทเรียน AJAX
บทเรียน Javascript


ท่านใดที่มีข้อสงสัยหรือติดปัญหาเกี่ยวกับ CSS HTML JavaScript & Jquery Ajax สามารถเขียนกระทู้ตั้งคำถามไว้ได้ที่
ถามตอบ HTML CSS
ถามตอบ JavaScript & Jquery Ajax

Return to “Jquery & Ajax Knowledge”

Users browsing this forum: No registered users and 3 guests