как получить и передать переменную через событие 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().Вам нужно для кодирования ваших запросов.