SweetAlert在Ajax成功回调中无法正常显示成功图标问题求助

安全阿岳

2026-5-26

解决SweetAlert成功图标不显示的问题

嘿，我来帮你排查下这个弹窗图标不显示的问题，大概率是SweetAlert版本的API差异或者资源加载的问题，咱们一步步来：

1. 检查SweetAlert版本是否匹配你的代码

你现在写的icon: "success"是SweetAlert 2.x的语法，但如果你的项目里引入的是老版本的SweetAlert（1.x），那这个参数是不生效的——老版本里用的是type参数而不是icon。

如果是SweetAlert 1.x，把代码改成这样：

swal({
  title: "Thankyou!",
  text: "Our excecutives will contact you soon.",
  type: "success" // 这里用type代替icon
});
// 或者更简洁的写法：
swal("Thankyou!", "Our excecutives will contact you soon.", "success");

如果确实用的是SweetAlert 2.x，那你的语法没问题，但要确保你已经正确引入了它的CSS文件——图标是依赖CSS来渲染的，没加载CSS的话只会显示文字，看不到图标。

2. 检查浏览器控制台的错误信息

打开浏览器的开发者工具（按F12），切换到「控制台」标签，看看有没有报错：

有没有swal is not defined的提示？如果有，说明SweetAlert的JS文件没加载成功。
有没有样式加载失败的报错？如果有，检查CSS文件的路径是否正确。

3. 确认Ajax返回的数据没问题

虽然弹窗能触发，但还是建议在success回调里加个console.log(data)，确认data.status确实等于1，避免因为返回数据格式问题导致逻辑出错：

success: function(data){
  console.log(data); // 打印返回数据，确认status值
  if(data.status == 1){
    swal({
      title: "Thankyou!",
      text: "Our excecutives will contact you soon.",
      icon: "success",
    });
    // ...后续代码
  }
}