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

时间:2014-10-17 09:26:07

标签: javascript php ajax json

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:

<div id='right' style='float:right; margin-top:2%;margin-right:15%'>
  <div style="">
   <table style="align:center">
    <tr>
     <td ColSpan="7">A </td>
     <td><img id = "A1" src="images/available.gif" style="border:none" onmouseover="over(this)"     onmouseout="out(this)" onclick="sold(this.id)" /></td>
     <td><img id = "A2" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this.id)" /></td>
     <td><img id = "A3" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
     <td><img id = "A4" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td><img id = "A5" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td><img id = "A6" src="images/available.gif" style="border:none" onmouseover="over(this)" onmouseout="out(this)" onclick="sold(this)" /></td>
 <td ColSpan="6"></td>
</tr>

我如何实现图像的改变?来自&lt; 39; available.gif&#39; to&#39; taken.gif&#39;根据json返回的AJAX请求。

1 个答案:

答案 0 :(得分:0)

我只关注已售出的功能,因为您的代码存在很多问题(可能您没有提交足够的代码)。我不确定你想在哪里放置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
}