结合两个功能？使用 throbber 的 Javascript 和 AJAX api 调用答案

【问题标题】：Combine two functions? Javascript and AJAX api call with throbber结合两个功能？使用 throbber 的 Javascript 和 AJAX api 调用
【发布时间】：2014-03-03 16:51:54
【问题描述】：

我有一个函数 getShare，它创建一个脚本，然后调用一个 url 缩短器 api，然后返回一个缩短的 url 并将该链接设置为输入框的值。

其次，我也有这个功能，我正在尝试使用第一个功能。到目前为止，我只能 .show 加载器 gif，但在函数成功时无法隐藏它。

编辑：下面是我在 response.success 中的原始脚本的更新代码，但我在控制台中收到一条消息，提示无法加载资源和 404 - 缺少的 url 显示为 http://b1t.co/Site/api/External/MakeUrlWithGet?callback=apiCallback&_=1391704846002

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

                {       
                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 = $('#gif_input').value;
                var vidUrl = $('#gif_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)
{
    var obj = jQuery.parseJSON(JSON.stringify(data));
    $("#input-url").val(obj.shortUrl);
    }
    }
},
    error:function(){
    $('#loader').hide();
    }
    });
}

【问题讨论】：

请不要同时问两个问题。 James_1x0 已经回答了您的问题。您应该针对您的 404 问题发布一个新问题。我在输入该 URL 时收到 404，我不知道您为什么希望 AJAX 调用不会收到 404
@JuanMendes 因为我是新手，所以这就是原因。我非常感谢您指出提出问题的适当礼仪，即使您的语气是被动的攻击性。
“请不要同时问两个问题”。我认为这是一个很好的表达方式。我只是向你展示这里的绳索。这使得这些问题对除了你之外的其他人有用。您可能注意到您没有得到太多帮助，因为您的问题是双重的，并且问题不相关。问一个新问题会让你更快得到答案
我不是想惹你生气，我确实试图引导你（而你对此感到生气）。当我在 URL 框中键入 URL http://b1t.co/Site/api/External/MakeUrlWithGet 时，它会给你一个 404。我仍然不知道您希望它如何工作。

标签： javascript jquery ajax preloader throbber

【解决方案1】：

没有必要“组合”它。

有人建议的是常规的 ajax 方法。只需在 success: 回调中移动您想要成功执行的 js 脚本即可。

在我在这里做的另一个答案中阅读有关 ajax 方法的更多信息：https://stackoverflow.com/questions/21285630/writing-my-first-rest-api-call-to-a-webservice-endpoint-post/21286810#21286810 或 jQuery 的文档：http://api.jquery.com/jQuery.ajax/

注意：要使用它，您需要 jQuery 和可能的 ajax 的 XDR 插件来支持

【讨论】：

谢谢，这是有道理的，我也更新了我的答案。你能看看吗？我不确定为什么我会收到错误。谢谢！
@dMaller 你应该问一个新问题，但是你是在本地测试吗...？如果您在机器上进行测试，您将无法完成 ajax 调用 - 只有托管在服务器上才能进行调用。此外，为了快速参考，请查看 google chrome 开发工具“网络”部分以查看您从 API 或您进行 ajax 调用的任何资源返回的响应。