Question

我的数据库中有以下表格：

+-----------+-------------+------+-----+---------+----------------+
| Field     | Type        | Null | Key | Default | Extra          |
+-----------+-------------+------+-----+---------+----------------+
| id        | int(11)     | NO   | PRI | NULL    | auto_increment |
| fullname  | varchar(50) | YES  |     | NULL    |                |
| email     | varchar(50) | YES  |     | NULL    |                |
| password  | varchar(50) | YES  |     | NULL    |                |
| gender    | varchar(50) | YES  |     | NULL    |                |
| birthdate | varchar(50) | YES  |     | NULL    |                |
+-----------+-------------+------+-----+---------+----------------+

我通过ajax方法查询来自相同的数据：

function getUserDB(){
    return ($.ajax({
        url: 'services/users?',
        method: 'get',
        headers: { 'Accept': 'application/json' }, 
        success: function(data) {
                console.log ("getUserDB got the user data");
                UserDB = JSON.stringify(data);
                UserDBObj = JSON.parse(UserDB);
            }
    }));
}

我有一个HTML页面，应根据fullname在各个地方（div）显示id。为了避免为每个div触发jQuery，我想我可以在页面加载时存储响应并使用另一种方法来获取fullname。这是我写的：

function getUserName(ID){
    var username;
    console.log(" getUserName called");
    for(var index in UserDBObj){
        if (UserDBObj[index] == ID)
        {
            username = UserDBObj[index].fullname;
            console.log("Got username : "+ username);
        }
     }
    return username;
}

我为必须显示名称的相应div调用getUserName(id)。但是这没有用，因为ajax调用是异步的，即使在获取数据之前也会调用getUserName(id)。

有任何建议如何实现这一目标？我看到过类似的问题，但没有一个问题得出结论。

Answer 1

尝试在ajax调用完成后调用该函数

@font-face {
  font-family: 'Open Sans';
  ...
}

Answer 2

Promises（jQuery环境中的延迟对象）是处理这类需求的最好方法。它允许您以一种允许您忽略xhr调用的特定时间的方式处理异步调用。在下面的代码中，你的ajax调用只被调用一次，从那时起，每当你调用getUser函数时，它只是使用xhr调用的缓存结果而不重复它。您无需跟踪＆＃39;是否加载了ajax结果＆＃39;或类似的......承诺为你做的。

关于ES6的MDN承诺规范： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

jQuery延迟规范（与Promises相同的想法）： https://api.jquery.com/category/deferred-object/

＆＃13;

var xhrUsers = $.get('/api/users');

function getUser(id) {
  return xhrUsers.then(function(usersList) {
    return usersList[id];
  });
}

function getUserFullName(id) {
  return xhrUsers.then(function(usersList) {
    return usersList[id].fullname;
  });
}


//example

getUser('bob').done(function(user) {
  //do something with user bob
});

getUserFullName('jane').done(function(fullname) {
  console.log('user jane\'s full name is: ' + fullname);
});

＆＃13;

Answer 3

加载后执行数据处理例程。

这样的事情（你必须更换＆＃39; myDivSelector＆＃39;）：

function populateUsers() {
    $(myDivSelector).each(function () {
        var name = getUserName(this.id);
        //handle user name
    });
}
function getUserDB(){
    return ($.ajax({
        url: 'services/users?',
        method: 'get',
        headers: { 'Accept': 'application/json' }, 
        success: function(data) {
            console.log ("getUserDB got the user data");
            UserDB = JSON.stringify(data);
            UserDBObj = JSON.parse(UserDB);
            populateUsers();
        }
    }));
}

Answer 4

你基本上可以做的（不改变应用程序的一般行为）是使getUserName函数也异步，因为它依赖于异步事件。

一种可能性，可以这样看：

（我只给出一个大纲，而不是完整的代码）

function setUsername(ID, divId) {
   if (UserDBObj_isLoaded) {
      // do as before
   }
   else {
      // set callback function that will be called from the
      // ajax-call success handler
      var cb = function() {
         // get the value for the name
         ...
         // set the name into the divId
         ...
      }
      UserObj_cbs.push(cb);
   }
}

这里仅是成功处理程序的概述：

    success: function(data) {
        console.log ("getUserDB got the user data");
            UserDB = JSON.stringify(data);
            UserDBObj = JSON.parse(UserDB);
            UserDBObj_isLoaded = true;

            // process all the callback functions till now
            for (i=0; i<UserDBObj_cbs.length; i++) {
                UserDbObj_cbs[i]();
            }
        }

如何缓存JQUERY GET响应（数据）并在另一个函数中使用它？

4 个答案: