Javascript 根据数据库更改页面上的图像

getseats.php包含返回值，如果座位的状态为0，则可单击图标应从可用状态更改为不可用状态，很难实现这一点！任何帮助或建议都将不胜感激！我在下面展示了我的代码：

    <?php
 $noerrors=dbconnect();
 if($noerrors <> 0) {
  echo '{"errorcode":"'.$noerrors.'"}';
 } else {
  $query = "select seatnum from seats where status='0'";
  $link = mysql_query($query);
  if (!$link) {
   echo '{"errorcode":"3"}';
  } else {
   $rows = array();
   while($r = mysql_fetch_assoc($link)) {
    $rows[] = $r;
   }
   $json=json_encode($rows);  
   echo $json;
  }
 }
 function dbconnect(){
  $hostname = "localhost";
  $username = "root";
  $password = "root";
  $noerrors = 0;
  $link = @ mysql_connect($hostname, $username, $password);
  if (!$link) {
   $noerrors = 1;
  } else {
   $db_selected = @ mysql_select_db('bookings', $link);
   if (!$db_selected) {
    $noerrors = 2;
   }
  }
  return $noerrors;
 }

我还有一个javascript文件booking.js，它将包含HTML脚本中提到的函数，但没有代码作为我一直使用的部分。下面是第一行的HTML

HTML:

---

如何根据AJAX请求将图像从“available.gif”更改为“take.gif”，并使用json返回。

我将只关注已售出的函数，因为您的代码有很多问题，可能您提交的代码不够。我不确定您想将Ajax调用放在哪里，但这里有一个函数可以切换可用/拍摄的图像

function sold( id ) {
  var ele = document.getElementById( id ); // get image element
  //--- toggle image
  var src = ( ele.src == 'images/available.gif') ? 'images/taken.gif' 
                                                 : 'images/available.gif';
  ele.src = src; //--- update image src
}

---

注意：你不应该再使用“mysql”。我在html中的脚本标记中放置了getSeats，因为它会在页面加载时更改。谢谢你的意见！

function sold( id ) {
  var ele = document.getElementById( id ); // get image element
  //--- toggle image
  var src = ( ele.src == 'images/available.gif') ? 'images/taken.gif' 
                                                 : 'images/available.gif';
  ele.src = src; //--- update image src
}