jQuery AJAX - 将数据发布到 IMG 标签答案

【问题标题】：jQuery AJAX - POST data to IMG tagjQuery AJAX - 将数据发布到 IMG 标签
【发布时间】：2011-10-08 13:54:17
【问题描述】：

file.php

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

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

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

我正在尝试执行以下操作：

当按钮被点击时，$variable 应该被传递给 image.php 并且图像应该相应地重新加载。是的，我知道我们可以将 src 更新为 image.php?variable=mainImage。 ($_GET)

但是是否可以通过 $_POST 发送 $variable 而不刷新页面，而只刷新图像？

【问题讨论】：

标签： php jquery ajax post image

【解决方案1】：

您可能可以使用data URIs 来完成此操作，以获得类似：

// 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 文档的minimal image transport 部分可能还提供了一些有用的信息，说明如何更紧密地集成这些功能。

【讨论】：

【解决方案2】：

当然，您可以使用 jQuery 来完成此操作。我建议在这样做之前给你的图像一个 id，这样我们就可以选择那个特定的图像并获取源，所以这样做。

<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);  
   })
});

【讨论】：

请注意image.php的response是一个带有二进制数据的header，所以你的例子中的数据是二进制的，不能赋值给src。或者，也许我误解了什么？感谢您的评论。