在页面加载时调用多个 Javascript 函数答案

【问题标题】：Calling multiple Javascript functions on page load在页面加载时调用多个 Javascript 函数
【发布时间】：2012-08-30 10:10:52
【问题描述】：

我一直在尝试在页面加载时从 html 正文中调用 4 个 JS 函数。这些函数中的每一个都调用 JSP servlet 从数据库中获取数据并填充到相应的列表框中。我正在编辑屏幕上尝试预填充列表框。

我正在尝试这样的事情：

      //call the JS to prepopulate the metadata
    function populateOnPageLoad(){
        populateA(); 
        populateB();
        populateC();
        populateD();
    }

我还尝试在 body onload 中直接调用所有 4 个函数。似乎它只能调用 populateD() 并在列表框中显示数据。我已经在插入操作中测试了其中的每一个，并且 JSP servlet 工作正常。我什至更改了这些函数的顺序以检查它是否只调用最后一个函数，但它似乎并没有那样工作。

这可能是什么问题以及可能的解决方案？

谢谢！

【问题讨论】：

你能添加更多代码吗..？喜欢你的任何一种方法populateA()，populateB()......
还有，这些函数放在哪里？在“onload”事件处理程序中？
您是否能够检查网络活动以查看是否为每个函数发送了每个 ajax 请求？
你为什么在页面加载时进行 ajax 调用？在几乎所有情况下，您最初都应该能够直接在页面上填充该数据，而不是进行 ajax 调用。
Reimius，我正在从下拉列表中选择一个值，并且我正在执行 AJAX 调用以在我的插入操作中填充 4 个列表框。但是在我的编辑操作中，我预先选择了下拉值，所以没有事件来填充列表框。我正在尝试使用相同的 AJAX 调用填充数据。

标签： javascript html jsp

【解决方案1】：

您应该查看 window.onload 而不是 document.body.onload。
此外，不要设置 window.onload 使用 window.addEventListener('load',populateOnPageLoad,false); 或

window.addEventListener('load',populateA,false);
window.addEventListener('load',populateB,false);
window.addEventListener('load',populateC,false);
window.addEventListener('load',populateD,false);

如果您使用 ajax，请确保您没有覆盖之前调用的 XMLHttpRequest 对象（即确保它们不共享范围/变量名称）

【讨论】：

Sshac，我应该在 js 函数中添加 window.addeventlistener() 并从页面加载中调用它吗？我正在使用 Ajax 来填充列表框。在插入操作中，我正在处理通过下拉更改事件。但是在编辑操作中，我不会在第一次出现下拉列表时出现事件，因为它具有插入的预选值。
我可以自己解决这个问题，不过花了很长时间才找到解决方案。我在加载页面时将记录 ID（我正在尝试编辑）传递给 populateOnPageLoad()。当我这样做时，它会将上一条记录中的相关数据填充到相应的列表框中。

【解决方案2】：

试试这个，

function populateOnPageLoad(){
    setTimeOut(populateA(),500); 
    setTimeOut(populateB(),500);
    setTimeOut(populateC().500);
    setTimeOut(populateD(),500;
}

【讨论】：

【解决方案3】：

我在加载页面时将记录 ID（我正在尝试编辑）传递给 populateOnPageLoad()。当我这样做时，它会将上一条记录中的相关数据填充到相应的列表框中

【讨论】：