bargraph.html的data变量无法传递到app.js的问题求助

我来帮你拆解问题，一步步解决这个问题：

核心错误分析 #

你的代码里有几个关键问题导致数据传不过去：

1. 错误访问函数的data属性 #

你在app.js里写的console.log(passfunction.data)完全是错误的用法——passfunction是一个普通函数，不是带有data属性的对象，除非你主动给它添加这个属性，否则直接这么写肯定会输出undefined。

另外你app.js里的passfunction还有个小bug：console.log(data)写在了return data之后，代码执行到return就会立刻跳出函数，这行日志永远不会执行，得把它移到return前面。

2. 异步请求的时序问题 #

就算你修正了函数的写法，app.js里$(document).ready的代码会在页面加载完成就立刻执行，但bargraph.html里的ajax请求是用户点击按钮后才触发的异步操作，数据返回的时间肯定晚于app.js代码执行的时间，所以就算你把数据存在全局变量里，直接在ready里打印也拿不到。

修复方案 #

我给你两种靠谱的解决方式，选哪种都可以：

方案一：用全局变量存储数据（简单直接） #

先修改app.js，把数据存到全局变量里，同时修正函数的日志位置：

// 定义全局变量存储从html传来的数据
let receivedData = null;

function passfunction(data) { 
  console.log(data); // 把日志移到return前面，确保能执行
  receivedData = data; // 将数据存入全局变量
  return data;
} 

$(document).ready(function(){ 
  // 因为数据是异步获取的，不能直接在ready里打印，要等用户触发请求后再读取
  $('#submitButton').on('click', function() {
    // 用定时器临时测试（生产环境建议用回调/事件替代定时器）
    setTimeout(() => {
      console.log(receivedData); // 现在就能拿到正确数据了
    }, 500);
  });
});

注意要确保app.js在bargraph.html之前加载（比如在html的<head>里引入app.js），这样passfunction才能被html里的代码调用。

方案二：用自定义事件传递数据（更优雅，无全局污染） #

这种方式不需要全局变量，通过事件触发传递数据，更符合前端模块化的最佳实践：

首先修改bargraph.html里的ajax成功回调，触发一个自定义事件：

<script type="text/javascript">
  $('#submitButton').click(function(e){
    var data1=$("#data1").val();
    var data2=$("#data2").val();
    $.ajax({
      type: 'POST',
      url: 'data.php',
      dataType: 'html',
      data: {data1:data1,data2:data2},
      success:function(data){
        // 触发自定义事件，把数据作为参数传递
        $(document).trigger('dataLoaded', [data]);
        console.log(data);
      }
    });
  });
</script>

然后修改app.js，监听这个自定义事件：

$(document).ready(function(){ 
  // 监听自定义事件，当数据加载完成时自动触发
  $(document).on('dataLoaded', function(event, data) {
    console.log(data); // 这里就能拿到正确的数据了
    // 你可以在这里直接写处理数据的逻辑，比如绘制柱状图
  });
});

额外提醒 #

你app.js里那段未完成的ajax代码看起来是多余的，和html里的ajax请求没有关联，建议要么补全逻辑，要么删掉，避免混淆。

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