JQuery Get按钮功能异常求助：获取值后无法填充后续行

嘿，我几乎能肯定你是踩了AJAX异步执行的坑！因为$.get是异步请求，代码不会乖乖等它拿到服务器返回的数据再往下跑——你在System.out里能看到正确值，是因为那行代码在请求成功的回调函数里，只有当数据真的回来时才会执行；但你紧接着的填充操作，大概率是写在回调外面的，这时候请求还没完成，值根本还没被赋值，自然显示不出来，而硬编码是同步的，直接就能用，所以没问题。

给你举个错误写法的例子，是不是和你的代码类似？

let myValue;
$.get('/your-api-url', function(data) {
  myValue = data;
  System.out.println(myValue); // 这里能正确输出，因为回调里已经拿到数据了
});
// 这里直接用myValue填充，这时候$.get还没执行完，myValue还是undefined！
$('#target-element').text(myValue);

那正确的做法是什么呢？把填充操作放到$.get的回调函数里面，确保只有当数据返回后才执行填充：

$.get('/your-api-url', function(data) {
  System.out.println(data); // 确认值正确
  $('#target-element').text(data); // 在这里填充，数据已经稳稳拿到了
});

如果你觉得回调嵌套看着不舒服，也可以用Promise/async-await的写法，让异步代码看起来像同步的，更清爽：

async function loadAndFillValue() {
  try {
    const data = await $.get('/your-api-url');
    System.out.println(data);
    $('#target-element').text(data);
  } catch (error) {
    console.error('请求出错啦:', error);
  }
}
// 调用这个函数就行
loadAndFillValue();

另外，也可以快速排查下小概率情况：比如你填充的目标元素选择器是不是写错了？比如ID拼写错了、或者代码执行时元素还没加载到DOM里？不过既然硬编码能显示，这个可能性不大，但也可以把代码放到$(document).ready()里，确保DOM加载完成后再执行：

$(document).ready(function() {
  // 把你的$.get和填充代码放这里
});

总结一下，90%以上的概率就是异步请求的执行顺序问题，把填充逻辑放到回调或者await之后，问题应该就解决啦！

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