如何从JS的post函数中获取变量？代码返回null问题求助

嘿，我一眼就看出问题所在啦——你踩了异步JavaScript操作的经典坑！

为什么你的mydata始终是null？ #

$.post是一个异步HTTP请求，也就是说JavaScript不会暂停下来等着请求完成，而是会继续执行后面的代码。当你的getData函数执行到return mydata;这一行时，$.post的回调函数（就是那个给mydata赋值的函数）还没被调用呢——请求还在后台和服务器交互呢！所以这时候mydata还是你一开始定义的null。

怎么正确获取异步请求的数据？ #

异步操作的核心是“等请求完成后再处理数据”，下面给你几种常用的解决方案：

方案1：使用回调函数（最适配jQuery的传统写法）

把处理数据的逻辑放进回调里，等请求完成后自动触发：

function getData(input, callback) {
  $.post('getdata.php', { input: input }, function(data) {
    // 请求成功后，把数据传给回调函数
    callback(data);
  }, 'json');
}

// 调用示例：
getData('你的输入值', function(result) {
  console.log('拿到数据啦:', result);
  // 在这里写你需要用数据做的事情，比如渲染页面、计算等等
});

方案2：返回Promise（更现代的链式写法）

用Promise封装请求，方便后续的链式调用和错误处理：

function getData(input) {
  return new Promise((resolve, reject) => {
    $.post('getdata.php', { input: input }, 'json')
      .done(function(data) {
        resolve(data); // 请求成功时传递数据
      })
      .fail(function(error) {
        reject(error); // 请求失败时传递错误信息
      });
  });
}

// 调用示例：
getData('你的输入值')
  .then(result => {
    console.log('拿到数据:', result);
    // 处理数据
  })
  .catch(error => {
    console.error('请求出错了:', error);
    // 处理错误
  });

方案3：使用async/await（最简洁的现代写法）

如果你的环境支持ES2017+，可以用async/await让异步代码看起来像同步代码：

async function getData(input) {
  try {
    // 用await等待请求完成，直接拿到数据
    const data = await $.post('getdata.php', { input: input }, 'json');
    return data;
  } catch (error) {
    console.error('请求失败:', error);
    throw error; // 把错误抛出去让调用者处理
  }
}

// 调用示例（注意要在async函数内调用，或者用then）：
async function processData() {
  const result = await getData('你的输入值');
  console.log('拿到数据:', result);
  // 处理数据
}
processData();

总结 #

异步操作的关键就是不要试图“立刻返回异步结果”，而是要通过回调、Promise或者async/await的方式，等待请求完成后再处理数据。

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