Question

我正在学习使用AJAX，我想在点击按钮后插入图片。

但是图像没有出现，而是出现了很多字符。

我该怎么做呢？

$(document).ready(function() {

  $('#botonAjax').click(function() {
    type: "GET",
    $.ajax({
      url: "Img/inlaw.png",
      success: function(result) {
        $('#divAjax1').append(result);
      }
    });
  });

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="divAjax1">
  <h2>TEST AJAX</h2>
</div>

<button id="botonAjax">Cargar contenido externo</button>

非常感谢你 '

Answer 1

嗯......你必须明白，你究竟在装载什么以及如何将它集成到你的HTML中。

Ajax请求返回图像文件的内容，并将其直接放入div中。是 - 您看到图像文件的内容，而不是图像本身。

要查看图像，您有2个选项：

1）不要使用ajax。只是有一个＆＃39; img＆＃39;代码中的元素，并在按钮单击时更改它的src属性。有关详情，请点击此处so question

2）同样，有img元素，但是以CDATA的形式设置源。有关数据的参考，请检查MDN

我希望这会有所帮助。

Answer 2

我不认为这是最好的选择或解决方案，但是通过ajax加载图像意味着当请求完成时，图像将位于浏览器缓存中，因此，您只需附加一个图像与ajax调用中的源相同：

$(document).ready(function() {
   $('#botonAjax').click(function() {
    $.ajax({
      url: "Img/inlaw.png",
      success: function(result) {
        $('#divAjax1').append($('<img />').attr('src', 'Img/inlaw.png'));
      }
    });
  });
});

Ajax - 插入图像

2 个答案: