6

我知道这是一个很长的问题，所以请允许我尽可能地解释一下。

我有两个要在页面加载后运行的 javascript 函数，我们将它们称为 function1() 和 function2()。

function1() 使用 AJAX 从数据库中检索信息，该信息将根据从数据库中获得的信息将内容排列在一个 div 中。一旦函数完成，它还会从数据库中返回内容。

function2() 需要数据库中的值才能正常运行，因此它需要等到 function1() 返回其值，然后才能运行 function2()。不幸的是，我的代码不起作用，无需过多详细说明，以下是代码示意图：

function function1() {
if (some_cookie_exists) {
  //run some code
} else {
  //send parameters through "POST"
  xmlhttp.onreadystatechange = function() {
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    var a = some_value_from_database;
    // change div content
  return a;
  }
  }
//sending parameters
}
function function2(a) {
//run code that depends on value of "a"
}

window.onload = function() {
var data = function1();
function2(data);

我得到的错误是 var 数据未定义。function1() 成功检索数据，并按照我的预期运行，但 function2() 根本不执行，因为缺少值。谁能弄清楚我为什么会得到这个以及我应该如何解决这个问题？

注意：我真的只熟悉 Javascript（那时还是新手），我对 JQuery 基本上一无所知，所以如果你确实使用它来修复代码，请向我解释为什么它会起作用（它会在以后为我省去麻烦）

4

3 回答 3

4

AJAX 是异步的（这就是第一个 A 的含义）。AJAX 操作的结果在 function1() 中不可用，它们在onreadystatechange附加到 XMLHttpRequest 对象的处理程序中检索。所以目前还不清楚你会怎么做

var a = some_value_from_database;

在function1().

您需要做的是function2()从onreadystatechange处理程序调用。

如果您发布实际执行情况，function1我们或许能够提供更具体的细节。

更新：

以下是function2()当值可从 AJAX 调用获得时调用的方法：

xmlhttp.onreadystatechange = function() {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        var a = some_value_from_database;
        function2(a);
    }
}
于 2012-12-21T08:10:32.137 回答
4

用回调来做。

function function1(callback) {
    /* ... */
    callback(data); // instead of return
}
var function2 = function(data) { // important: make "function2" a variable so that it can be passed as an argument later on
    /* ... */
}    
window.onload = function() {
    function1(function2); // important: no parentheses after function2, otherwise it would be executed right away
}
于 2012-12-21T08:11:14.433 回答
0

因为根据定义，ajax 是异步的，所以 function2 将在 function1 中的 ajax 完成之前开始执行。JQuery 在这里很有用，因为您可以将 function2 放在 function1 中 ajax 调用的成功回调中。

因此，在您的 HTML 中包含 JQuery，以下 JS 应该可以工作：

$(function() {   //same as onload
      function1() ;
}

function function1() {
        $.ajax({
              url: "url here",
              type: "GET",
               success: function(data) { // data is what is returned in ajax response
                           // rearrange divs
                            function2(data);
                }
           });
);

function function2(data) {
}

更多关于 JQuery ajax 函数的信息：http: //api.jquery.com/jQuery.ajax/

于 2012-12-21T08:27:12.633 回答