如何通過onclick事件獲取並傳遞變量以更新數據庫

Question

我有一頁完整的以_off.jpg結尾的圖像。我有一個onclick事件，點擊圖像時，它會將圖像更改爲圖像的_on.jpg版本（灰色圖像）。這部分工作正常。我也希望它調用一個update.php頁面，我將使用傳入的圖像被點擊的變量來更新數據庫。

問題是我無法獲取單擊圖像的變量以傳遞到update.php頁面。

這裏是jQuery函數交換每個圖像與Ajax調用update.php

jQuery(function(){ 
      $(".img-swap").live('click', function() { 
       if ($(this).attr("class") == "img-swap") { 
       this.src = this.src.replace("_off","_on") 
        $.ajax({ 
        type: "get", 
        url: "updatelist.php" 
        }); 
      } else { 
       this.src = this.src.replace("_on","_off"); 
       } 
       $(this).toggleClass("on"); 
      }); 
    }); 

這裏是從目錄中調用圖像

  $files = glob("movieposters/*_off.*"); 
      for ($i=0; $i<count($files); $i++) 
      { $num = $files[$i]; 
      echo '<img src="'.$num.'" border="3" style="border-color:#ffffff" class="img-swap">'; 

Answer 1

我認爲這會做你想要什麼......

顯示圖像

<?php 
    // Load list 
    $_fileList = glob("movieposters/*_off.*"); 

    foreach ($_fileList as $_file) 
     echo '<img src="' . $_file . '" border="3" style="border-color:#ffffff" class="img-swap">'; 
?> 

交換他們......

<script> 
$(function(){ 
    $('.img-swap').live('click', function() { 
     var _src = $(this).attr('src'); 
     if (-1 == _src.indexOf('_on')) { 
      $(this).attr('src',_src.replace('_on','_off')).removeClass('on'); 
     } else { 
      $(this).attr('src',_src.replace('_off','_on')).addClass('on'); 
     } 

     // Update server 
     $.get('updatelist.php?image='+escape(_src)); 
    }); 
}); 
</script> 

那麼你的服務器腳本（updatelist.php）：

<?php 
    $_clickedFile = $_GET['image']; 
    ... 
?> 

Answer 2

這裏有一個部分AJAX請求的快速示例：

$.ajax({ 
    type: "GET", 
    url: "file.php", 
    data: "foo=three&bar=asdfg", 
    success: function(data) { 
    alert('Response was: ' + data); 
    } 
}); 

將變量設置爲派就在這裏，"foo=three&bar=asdfg"，所以如果你要發送的圖像的src=，這種要求可能的工作：

$.ajax({ 
    type: "GET", 
    url: "file.php", 
    data: "name=" + encode($(this).attr('src')), 
    success: function(data) { 
    alert('Response was: ' + data); 
    } 
}); 

請注意，我用encode()。您需要需要來編碼您的請求。