将Ajax数据存储到全局变量中

Question

将Ajax数据存储到全局变量中

6

被接受的解决方案对我来说有些无效。

$(document).ready(function() {
    var dataStore = (function(){
        var xml;

        $.ajax({
          type: "GET",
          url: "/?do=getcontentadm1n&category=homepage",
          dataType: "json",
          success : function(data) {
                        xml = data.html;
                alert(xml); // WORKS
                    }
        });

        return {getXml : function()
        {
            if (xml) return xml;
        }};
    })();

    var somevar = dataStore.getXml();

    alert(somevar); // UNDEFINED
});

还有其他解决方案吗？

谢谢。

- Alex G

5个回答

2

这个ajax调用是异步的。当你调用以下代码时，它可能还没有完成运行：

var somevar = dataStore.getXml();

- ozczecho

1

好的，这是我的第一次回复，但我会尽力。

我自己也一直在解决这个问题，学到了以下内容。

当你在函数外定义一个变量时，它会自动添加到“window”对象中。

所以如果我们这样做：

    var myValue;
    function setValue()
    {
        myValue = "test";
    }
    // Assuming setValue() has been run
    function getValue()
    {
        alert(window.myValue); // yup, it's "test"
    }

因此，如果我们使用这个知识将$.ajax数据存储在一个变量中，它会像这样进行。

    var xml;

    $.ajax({
        type: "GET",
        url: "/?do=getcontentadm1n&category=homepage",
        dataType: "json",
        success : function(data) {
            window.xml = data;
        }
    });

    alert(window.xml);

我认为这将帮助许多人理解并得到他们想要的答案。感谢阅读我的回复和来源：http://snook.ca/archives/javascript/global_variable 编辑：如下评论所述，此方法仅在async=false时有效。

- Cariah

1

这个无法与异步操作一起使用，只能在 async = false 的情况下使用。 - Graham T

0

@ggreiner：不要把函数放在变量里面，你会让其他用户感到困惑。

虽然有点生气，但并没有针对个人，因为互联网上没有可用的解决方案来在事件中存储AJAX数据并使用它们。

没必要在变量中使用任何函数，例如 var dataStore = (function(){。这会导致每次需要数据时调用额外的服务器请求。

下面是仅需调用一次AJAX并将其数据用于任何其他事件、函数的代码。这正是99%的用户要求的主要功能。

$(document).ready(function() {
    var html; // DEFINE VARS
    var css;
    var js;

    $('.editbutton').live('click', function() {
        $.ajax({
            async   : false, // !!!MAKE SURE THIS ONE IS SET!!!
            type    : "GET",
            url : "/?do=getcontent",
            data    : { category: category },
            dataType: 'json',
            success : function(data) {
                if (data.status == 'ok') {
                                html = data.html; // !!!STORE!!!
                                css = data.css;  // !!!STORE!!!
                                js = data.js;  // !!!STORE!!!
                }
                if (data.status == 'error') {
                    alert('ERROR!');
                }
            }
        });
    });

    // CALL ANY STORED VARIABLE FROM ANYWHERE

    $('.otherbutton').live('click', function() {
        alert(html); alert(css); alert(js);
    });

});

- Alex G

2

所有大写字母让你的回答难以被认真对待。此外，你关于“每次需要数据时都会调用额外的服务器请求”是错误的，请再次阅读代码并理解它。它只发出一个请求。关于这个解决方案，它是错误的。如果用户在点击editbutton之前点击了.otherbutton，那么数据尚未加载，将为null。 - driangle

1

你为什么不让发表评论的时间延长到1年呢？ - Alex G

0

只需使用 'async:false' Ajax，不要使用 var 关键字来创建全局响应。

- Mohammad Mahdi KouchakYazdi

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- driangle · Accepted Answer

它是空的，因为在调用getXml时，ajax请求尚未完成，记住ajax是异步的。解决这个问题的一种方法是强制将其同步：

       $.ajax({
          async: false,
          type: "GET",
          url: "/?do=getcontentadm1n&category=homepage",
          dataType: "json",
          success : function(data) {
                        xml = data.html;
                alert(xml); // WORKS
                    }
        });

回应评论：

我想要在点击时执行 AJAX，然后存储 data.html 以供其他鼠标事件使用

var dataStore = (function(){
    var html;
    function load(){
           $.ajax({
              async: false,
              type: "GET",
              url: "/?do=getcontentadm1n&category=homepage",
              dataType: "json",
              success : function(data) { html = data.html; }
            });
    }
    return {
        load : function() { 
            if(html) return;
            load();
        },
        getHtml: function(){
             if(!html) load();
             return html;
        }
    }
})();

$(element1).click(function(){
    dataStore.load();
});

$(element2).click(function(){
    var html = dataStore.getHtml();
    // use html
});