jQuery AJAX - отправлять данные в тег IMG

Question

file.php

<?php
  $variable = 'mainImage';
?>

<div>
  <img src="image.php">
</div>

<input type="button" onClick="">

---

Я пытаюсь сделать следующее:

При нажатии кнопки переменная $ 1012 * должна быть передана в image.php , и изображение должно перезагрузиться соответственно. Да, я знаю, что мы можем обновить src до image.php? Variable = mainImage . ($ _GET)

Но возможно ли отправить $ variable через $ _POST без обновления страницы, но с обновлением только изображения?

Answer 1

Вы, вероятно, можете сделать это, используя URI данных , чтобы получить что-то вроде:

// Instead of simply storing the URL as the src attribute,
//   execute the post and shove the data into a data URL
$.post('image.php', {variable: 'value'}, function(data) {
    image.src = "data:image/jpeg;base64," + data;
});

Также может быть некоторая полезная информация в разделе минимального транспорта изображений документации ajaxTransport о том, как более тесно интегрировать такие функции.

Answer 2

Конечно, вы можете использовать jQuery для этого. Я предлагаю дать вашему изображению идентификатор перед тем, как сделать это, чтобы мы могли выбрать это конкретное изображение и получить источник, так что сделайте это.

<img id="main-image"  src="image.php">

$(function(){
   var main_image = $('#main-image'); 
   var url = main_image.attr('src'); 
   $.post( url, { variable: '<?php echo $mainImage ?>' }, function( data ){
      main_image.attr('src', data);  
   })
});