我应该在哪里添加 AJAX 调用来加载负载？答案

【问题标题】：Where in this should I add an AJAX call for a load throbber?我应该在哪里添加 AJAX 调用来加载负载？
【发布时间】：2014-03-02 16:02:32
【问题描述】：

这是当用户单击生成缩短 url 的按钮时调用的函数，我想知道我会在哪里使用 AJAX 调用来调用 throbber。这需要几秒钟，同时我想使用一个颤抖的人。还是我最终会在单击按钮时调用的这个函数之外创建一个全新的函数？我还没有看到任何其他看起来像我的代码的示例。这里真的很新，非常感谢任何帮助，谢谢。

html 我想我需要将 gif 链接到...

<img src="gif/Loader.gif" id="loader"/>

我用来生成短 url 函数的当前 js 函数，虽然它需要几秒钟，所以我想我需要在某个地方调用我的 gif 并在回调成功时摆脱它？

function getShare()
{       
        var s = document.createElement('script');
        var browserUrl = document.location.href;
        //alert(browserUrl);
        if (browserUrl.indexOf("?") != -1){
                browserUrl = browserUrl.split("?");
                browserUrl = browserUrl[0];
        }
        //alert(browserUrl);

        var gifUrl = document.getElementById('gif_input').value;
        var vidUrl = document.getElementById('vid_input').value;
        //alert(gifUrl + "|" + vidUrl);

        url = encodeURIComponent(browserUrl + "?gifVid=" + gifUrl + "|" + vidUrl);
        //alert(encodeURIComponent("&"));
        s.id = 'dynScript';
        s.type='text/javascript';
        s.src = "http://b1t.co/Site/api/External/MakeUrlWithGet?callback=resultsCallBack&url=" + url;
        document.getElementsByTagName('head')[0].appendChild(s);
}

function resultsCallBack(data)
{
    //document.getElementById("results").innerHTML = JSON.stringify(data);
    //alert(JSON.stringify(data));
    var obj = jQuery.parseJSON(JSON.stringify(data));
    //alert(obj.shortUrl);
    jQuery("#input-url").val(obj.shortUrl);
}

【问题讨论】：

我很高兴有一个throbber标签

标签： javascript jquery ajax throbber

【解决方案1】：

将您的图像添加到它应该显示的位置，但将其隐藏：

<img src="gif/Loader.gif" id="loader" style="display:none;"/>

这是获取 url 并访问 API 的函数

function getShare(url)
{ 
    jQuery('#loader').show(); // show loading...
    jQuery.ajax({
        dataType: "jsonp",
        jsonpCallback:'apiCallback', // this will be send to api as ?callback=apiCallback because this api do not want to work with default jQuery callback function name
        url: 'http://b1t.co/Site/api/External/MakeUrlWithGet',
        data: {'url':url},
        success: function(response){
            jQuery('#loader').hide(); // hide loading...
            //respponse = {success: true, url: "http://sdfsdfs", shortUrl: "http://b1t.co/qz"} 
            if(response.success){

                console.log(response.url, response.shortUrl);

                jQuery("#input-url").val(response.shortUrl);
            }
        },
        error:function(){
            jQuery('#loader').hide(); // hide loading...
            //todo: network error o_O
        }
    });
}

顺便说一句，如果你想获得 HTML 元素的使用价值

var gifUrl = jQuery('#gif_input').val();

代替

var gifUrl = document.getElementById('gif_input').value;

【讨论】：

感谢您的回复。我敢肯定你的答案是直截了当的，我只是不知道如何正确应用它。当我的加载按钮被点击时，我得到了加载器 gif，但我不确定如何将我的代码与您提供的代码结合起来。我还按照您的建议将我的 .val() 代码重构为 jQuery。谢谢。

【解决方案2】：

在将 script 元素附加到 DOM 之前添加 throbber，并将其作为 resultsCallback 中的第一行删除。

如果您还想处理错误状态，请查看How to tell if a <script> tag failed to load。

【讨论】：