使用功能內部的getJSON創建jQuery插件

Question

我不確定這是否是由於getJSON是異步的還是不是異步的。 我認為這將是最明顯的原因，但是我對它的工作方式沒有清楚的了解。 在我的js文件中，我在body元素上調用healthCheck方法。 什么都沒發生。 我的getJSON回調函數是否被調用了？ 我不知道。

我已將腳本上傳到JSFiddle上 。

代碼也如下：

var baseURL = "http://someURL";
var id = "00000001";
var key = "0000aaaa-aa00-00a0-a00a-0000000a0000";
var healthcheck = "/version/healthcheck?";

( function($) {
        $.fn.healthCheck = function() {
            var timestamp = new Date().toJSON().toString();
            var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id;
            var signature = CryptoJS.HmacSHA1(request, key);
            request = baseURL + request + "&signature=" + signature;
            $.getJSON(request, function(data) {
                var result = new Object();
                $.each(data, function(key, val) {
                    result.key = val;
                    if (val == false) {
                        this.innerHTML = "PTV API is currently not working. Error type: " + key + ".";
                    } else {
                        this.append(key + " working. <br />");
                    }
                });
            });
            return this;
        };
    }(jQuery));

提前謝謝了。 希望查詢條件正確。 如果有人知道一些好的資源，可以更好地理解jQuery中的異步方法，也將不勝感激。 我還沒有發現很多容易理解的東西。

Answer 1

嘗試1）將jQuery.ajax（url [，settings]）的 context 設置 this $.fn.healthCheck ; 2）在$.each()處創建this對象的引用

var baseURL = "http://someURL";
var id = "00000001";
var key = "0000aaaa-aa00-00a0-a00a-0000000a0000";
var healthcheck = "/version/healthcheck?";

(function($) {
        $.fn.healthCheck = function() {
            // set `this` object within  `$.getJSON`
            var timestamp = new Date().toJSON().toString();
            var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id;
            var signature = CryptoJS.HmacSHA1(request, key);
            request = baseURL + request + "&signature=" + signature;
            $.ajax({
              url:request
            , type:"GET"
            , contentType: false
            , context: this
            , processData:false
            }).then(function(data) {
                // reference to `this` within `$.each()`
                var that = this; 
                var result = new Object();
                $.each(JSON.parse(data), function(key, val) {
                    result.key = val;
                    if (val == false) {
                        // `that` : `this`
                        that.innerHTML = "PTV API is currently not working. Error type: " + key + ".";
                    } else {
                        that.append(key + " working. <br />");
                        console.log("complete"); // notification
                    }
                });
            }, function(jqxhr, textStatus, errorThrown) {
                 console.log(textStatus, errorThrown); // log errors
            });
            return this;
        };
    }(jQuery));

$("body").healthCheck();

另請參閱如何返回異步調用的響應？

 var baseURL = "https://gist.githubusercontent.com/guest271314/23e61e522a14d45a35e1/raw/62775b7420f8df6b3d83244270d26495e40a1e9d/a.json"; var id = "00000001"; var key = "0000aaaa-aa00-00a0-a00a-0000000a0000"; var healthcheck = "/version/healthcheck?"; (function($) { $.fn.healthCheck = function() { var timestamp = new Date().toJSON().toString(); var request = healthcheck + "timestamp=" + timestamp + "&devid=" + id; var signature = 123;// CryptoJS.HmacSHA1(request, key); request = baseURL + request + "&signature=" + signature; $.ajax({ url:request , type:"GET" , contentType: false , context: this , processData:false }).then(function(data) { var that = this; var result = new Object(); $.each(JSON.parse(data), function(key, val) { result.key = val; if (val == false) { that.innerHTML = "PTV API is currently not working. Error type: " + key + "."; } else { that.append(key + " working. <br />"); console.log("complete"); // notification } }); }, function(jqxhr, textStatus, errorThrown) { console.log(textStatus, errorThrown); // log errors }); return this; }; }(jQuery)); $("body").healthCheck() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>