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

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

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

ภาพประจำตัวสมาชิก
bankjittapol
PHP Super Member
PHP Super Member
โพสต์: 344
ลงทะเบียนเมื่อ: 21/10/2019 10:19 am

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

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

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

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

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

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

.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 3003 times
เป็นอย่างไรสำหรับการใช้ Ajax แสดงผล เมื่อเลือกรายการใน list แล้วเปลี่ยนรูปภาพที่แสดง ซึ่งสามารถใช้วิธีนี้ไปประยุกต์ใช้กับงานอื่น ๆ เช่น เปลี่ยนจาก function change() เป็น function click() เพื่อใช้งานกับปุ่มกด แทน เป็นต้น หวังว่าบทความนี้จะเกิดประโยชน์ต่อท่านที่เข้ามาอ่านกันนะครับ

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


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

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

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