在函数内创建一个带有 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 设置为 $.fn.healthCheck 的 this ； 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();

另见 How do I return the response from an asynchronous call?

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>

在函数内创建一个带有 getJSON 的 jQuery 插件

Creating a jQuery plugin with getJSON inside the function

javascript

ajax

jquery

json

asynchronous