使用AJAX点击按钮插入图片失败显示乱码，求正确实现方法？

嘿，我来帮你搞定这个问题～你现在遇到的乱码情况，是因为你用AJAX直接请求了图片文件，然后把返回的二进制图片数据当成普通文本内容插入到页面里了——浏览器根本没法把这些二进制字节解析成可读文本，自然就变成一堆乱码啦。另外你的代码里还有个小语法错误：type: "GET",写在了$.ajax()函数外面，这会导致JS报错，得把它移到配置对象里才行。

下面给你两种正确实现“点击按钮插入图片”的方法，按需选择：

方法一：直接创建img标签（推荐，简单高效） #

这种方法不需要用AJAX，因为浏览器加载图片本身就有自己的机制，直接创建<img>元素并设置src属性就可以了，比AJAX请求二进制数据要简单得多：

$(document).ready(function() {
  $('#botonAjax').click(function() {
    // 创建img元素，设置图片路径和替代文本
    const imgElement = $('<img>')
      .attr('src', 'Img/inlaw.png')
      .attr('alt', '测试图片');
    
    // 将图片插入到目标div中
    $('#divAjax1').append(imgElement);
  });
});

HTML部分保持你原来的代码即可：

<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>

方法二：用AJAX请求二进制图片（适合特殊需求场景） #

如果你确实需要用AJAX来处理图片请求（比如要添加自定义请求头、监听加载进度等），那需要设置AJAX的响应类型为blob（二进制大对象），然后把返回的Blob转换成可访问的URL，再创建img标签：

$(document).ready(function() {
  $('#botonAjax').click(function() {
    $.ajax({
      url: "Img/inlaw.png",
      method: "GET", // jQuery官方更推荐用method代替type
      xhrFields: {
        responseType: 'blob' // 指定返回类型为二进制Blob对象
      },
      success: function(result) {
        // 将Blob对象转换成浏览器可识别的临时URL
        const tempImgUrl = URL.createObjectURL(result);
        
        // 创建img元素并插入页面
        const imgElement = $('<img>')
          .attr('src', tempImgUrl)
          .attr('alt', '测试图片');
        
        $('#divAjax1').append(imgElement);
        
        // 图片加载完成后释放临时URL，避免内存泄漏
        imgElement.on('load', function() {
          URL.revokeObjectURL(tempImgUrl);
        });
      }
    });
  });
});

额外注意事项 #

• 确保图片路径Img/inlaw.png是正确的：路径是相对于当前HTML文件的位置，比如如果HTML文件在根目录，Img文件夹也在根目录，那路径没问题；如果HTML在子文件夹里，可能需要改成../Img/inlaw.png（返回上一级目录）。
• 方法一足够应付绝大多数场景，除非你有特殊需求，否则优先用方法一，代码更简洁，性能也更好。

内容的提问来源于stack exchange，提问作者Lleims