Question

我正在尝试在进行ajax调用时显示加载gif，下面是我的代码，我在show语句中收到错误，并且控制台正在抛出。

TypeError {stack: (...), message: "undefined is not a function"}

下面是我的代码

require(["dojo/_base/xhr"], function(xhr) {
    xhr.get({
        url: uri,
        handleAs: "text",
        load: function(data) {
            require(["dojo/dom-construct", "dojo/_base/window"], function(domConstruct, win) {
                domConstruct.place("<div id='loadgif'><img src='/22.gif' ></img></div> ", win.body());
            });

            dojo.byId("loadgif").show();
            console.log(data);
            txt = data;
            console.log(txt);
            console.log(txt.split("/")[0]);
            console.log(txt.split("/")[2]);
            dojo.byId("loadgif").hide();
            },
        error: function(error) {
            console.log("error");
        }
    });
});

Answer 1

那是因为DOMNode::show()不是函数，所以以下几行不起作用：

dojo.byId("loadgif").show();
dojo.byId("loadgif").hide();

最好的方法是使用dojo/dom-sytle::set()函数，例如：

domStyle.set(dom.byId("loadgif"), "display", "block");
domStyle.set(dom.byId("loadgif"), "display", "none");

然而，还有一些其他奇怪的事情。在AJAX请求完成后（因为它在load回调中），你只是在一瞬间显示loadgif。

如果您想在网络请求期间显示指标，则应将该段代码移到load回调之外，例如：

require([ "dojo/_base/xhr", "dojo/dom-construct", "dojo/dom", "dojo/dom-style", "dojo/_base/window", "dojo/domReady!" ], function(xhr, domConstruct, dom, domStyle, win) {
    domConstruct.place("<div id='loadgif'><img src='/22.gif' /></div>", win.body());
    var node = dom.byId("loadgif");
    domStyle.set(node, "display", "block");
    xhr.get({
        url: uri,
        handleAs: "text",
        load: function(data) {
            console.log(data);
            txt = data;
            console.log(txt);
            console.log(txt.split("/")[0]);
            console.log(txt.split("/")[2]);
            domStyle.set(node, "display", "none");
        },
        error: function(error) {
            console.log("error");
        }
    });
});

此外，您只需将require()个功能一起移动即可。

可以在JSFiddle上找到完整的示例：http://jsfiddle.net/23VKq/

Dojo＆＃34; TypeError {stack：（...），message：＆＃34; undefined不是函数＆＃34;}＆＃34;同时试图在ajax加载上显示一个gif

1 个答案: