jQuery Ajax点击按钮获取服务端JSON响应并渲染至Div失败求助

核心问题 #

你的代码无法获取JSON响应的关键原因是异步操作的时序错误，同时存在async函数未正确使用、冗余JSON解析等问题：

• $.ajax是异步请求，调用myFunction()后立即执行setResponse()时，AJAX请求还未完成，resJson仍为初始的undefined
• 标记了async的myFunction内部没有用await等待AJAX完成，无法保证后续代码的执行时机
• 手动调用$.parseJSON属于冗余操作（jQuery可自动解析JSON响应）
• 使用全局变量resJson传递数据容易引发时序问题和变量污染

修复方案 #

方案一：直接在AJAX回调中处理渲染（最简写法）

移除全局变量，将DOM渲染逻辑直接放在AJAX的成功回调里，确保只有当请求完成后才更新页面：

$('#btPay').on('click', function() {
  var settings = {
    "url": "urlApi",
    "method": "POST",
    "timeout": 0,
    "headers": {"headerContents"},
    "data": JSON.stringify({"inputData"}),
    "dataType": "json" // 让jQuery自动解析JSON响应
  };
  
  $.ajax(settings)
    .done(function(response) {
      // 渲染整个JSON对象（可根据需求修改为渲染特定字段）
      $("#notif").html(JSON.stringify(response, null, 2));
      // 示例：若要渲染响应中的message字段，可写 $("#notif").html(response.message);
    })
    .fail(function(error) {
      // 处理请求失败的情况
      $("#notif").html("请求失败：" + error.statusText);
    });
});

方案二：使用async/await规范异步流程

利用async/await让异步代码同步化，提升可读性：

async function fetchAndRenderData() {
  try {
    var settings = {
      "url": "urlApi",
      "method": "POST",
      "timeout": 0,
      "headers": {"headerContents"},
      "data": JSON.stringify({"inputData"}),
      "dataType": "json"
    };
    
    // 等待AJAX请求完成
    const response = await $.ajax(settings);
    // 渲染数据
    $("#notif").html(JSON.stringify(response, null, 2));
  } catch (error) {
    $("#notif").html("请求失败：" + error.statusText);
  }
}

// 绑定点击事件
$('#btPay').on('click', fetchAndRenderData);

注意事项 #

1. 确保urlApi是正确的后端接口地址，跨域场景下需要后端配置CORS
2. headers需根据接口要求填写（比如通常需要"Content-Type": "application/json"）
3. data中的inputData要替换为接口所需的真实参数
4. 若只需展示JSON中的特定字段，直接调用response.字段名即可，无需渲染整个JSON对象

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