1

ユーザーが短縮 URL を生成するボタンをクリックしたときに呼び出される関数を次に示します。throbber の AJAX 呼び出しをどこで使用するのか疑問に思っています。数秒かかるので、その間にスロバーを使いたかった。または、ボタンがクリックされたときに呼び出されるこの関数の外に、まったく新しい関数を作成することになりますか? 私のコードのように見える他の例は見たことがありません。ここでは本当に新しいので、助けていただければ幸いです。

gifをリンクする必要があると思われるhtml...

<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);
}
4

2 に答える 2

2

表示されるはずの場所に画像を追加しますが、非表示にします。

<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;
于 2014-02-05T23:57:43.367 に答える
0

script要素をに追加する前に throbber を追加し、 のDOM最初の行から削除しresultsCallbackます。

エラー状態も処理したい場合は、How to tell if a <script> tag failed to load を見てください。

于 2014-02-05T23:27:07.773 に答える