Ajax POST请求success更新HTML后内容消失，需如何修改代码？

我来帮你排查并解决这个问题，先看看你的代码里存在的几个关键问题，以及内容消失的核心原因：

问题分析 #

1. 请求类型不匹配：你用了POST请求http://api.open-notify.org/astros.json，但这个API只支持GET请求，所以你的请求会返回405错误，实际会进入error回调而不是success，这可能让你误以为是success执行后内容消失。
2. 无效的属性访问：你在success里写了alert(data.Title)，但这个API返回的数据里根本没有Title字段，正确的字段是data.message（返回"success"）、data.number（宇航员数量）等，这个错误可能导致后续的DOM更新代码执行异常。
3. 重复的配置项：代码里重复写了dataType: 'json'，虽然不影响功能，但属于冗余代码。
4. 可能的页面刷新：如果这个Ajax请求是绑定在表单的提交事件中，你没有阻止表单的默认提交行为，那么Ajax执行完成后，表单会自动提交并刷新页面，导致你动态添加的内容全部消失——这是最可能导致内容消失的原因！

修改步骤 #

• 把请求类型从POST改成GET，匹配API的要求。
• 修正success里的属性访问，比如改成alert(data.message)或者alert(data.number)。
• 移除重复的dataType配置。
• 如果是在表单提交事件中调用这个Ajax，一定要添加event.preventDefault()阻止表单默认提交行为，避免页面刷新。
• 尽量避免使用async: false（同步请求），它会阻塞页面，现在已经不推荐使用，改用默认的异步请求即可。

修正后的代码 #

// 假设这个代码是绑定在表单提交事件中，需要阻止默认行为
$('form').on('submit', function(event) {
  // 阻止表单默认提交，避免页面刷新
  event.preventDefault();

  $.ajax({
    type: 'GET', // 改成GET请求
    url: 'http://api.open-notify.org/astros.json',
    dataType: 'json',
    // 移除async: false，用默认的异步请求
    success: (data) => {
      // 访问正确的字段
      alert(`当前太空宇航员数量：${data.number}`);
      $("#final").append("Success<br>");
    },
    error: (xhr, status, error) => {
      $("#final").append(`Error: ${error}<br>`);
    },
    complete: () => {
      $("#final").append("#################<br>");
      alert("complete");
    },
    timeout: 3000
  });
});

如果你的Ajax不是绑定在表单提交事件里，那只需要去掉表单相关的代码，保留Ajax的修正部分即可。这样修改后，你动态添加的内容就不会消失了。

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