jQuery - 在关注输入字段时运行函数

Question

我有一个文本输入字段，当您单击该字段时，会触发 json 请求，并检索一些数据。

$("input").focus(function(){
 var thefield = $(this);
 $.getJSON("http://www.blabla.com/bla",
    function(data){
      alert(JSON.stringify(data));  
          thefield.val('blabla');
    }
   );  
});

我怎样才能做到这一点，这个请求只能运行一次，而不是每次我关注文本字段时？但我仍然希望当我第二次、第三次等聚焦时，数据可用。

Answer 1

$('input').one('focus', function() {
    // load data using ajax
    $(this).data('ajax-data', data);
});
$('input').focus(function() { $(this).val($(this).data('ajax-data')); });

Answer 2

在第一次点击时分配另一个函数或在 alt 属性中存储一些值来指示是否需要触发请求

Answer 3

像这样的事情就可以解决问题：

//have this line outside any function to make it global:
var _globalData = "";

$("input").focus(function(){
    if ($(this).attr("focused") == "1") {
        alert("already focused before, data is: " + _globalData);
    }
    else {
        var thefield = $(this);
        $.getJSON("http://www.blabla.com/bla",
        function(data) {
            _globalData = JSON.stringify(data);
            alert(_globalData);  
            thefield.val('blabla');
            thefield.attr('focused', '1');
        });
    }
);

Answer 4

如果您的 input 元素不共享相同的数据，请执行以下操作：

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            field.data("ajax-data", response).val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if ($this.data("ajax-data")) {
        $(this).val($this.data("ajax-data"));
    } else {
        loadData($this);
    }
});

如果它们共享数据，则代码几乎相同，但使用共享变量而不是使用 data。

var data = null;

function loadData(field) {
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            data = response;
            field.val(response);
        }
    );
};

$("input").focus(function(){
    var $this = $(this);
    if (data) {
        $(this).val(data);
    } else {
        loadData($this);
    }
});

您还可以创建一个小型 jQuery 插件来处理上述任何场景，并且还支持多个事件：

(function($){

    $.fn.loadInputData = function(options){

        var defaults = {
            url: "http://www.blabla.com/bla",
            events: "focus",
            sharedData: false
        };
        var _data = null;

        options = $.extend({}, defaults, options);

        function loadData(field){
            $.getJSON(options.url,
                function(response){
                    if (options.sharedData) {
                        _data = response;
                    } else {
                        field.data("ajax-data", response);
                    }
                    field.val(response);
                }
            );
        }

        return this.each(function(){
            var $this = $(this);
            $this.bind(options.events, function(){
                if ((options.sharedData && !_data) ||
                    (!options.sharedData && !$this.data("ajax-data")) {
                    loadData($this);
                } else {
                    $this.val(options.sharedData ? _data : $this.data("ajax-data"));
                }
            });
        })
    };
})(jQuery);

该插件的用法是：

$("input").loadInputData({ sharedData: true });

为了好玩，已接受答案的改进版本：

$('input').one('focus', function() {
    var $this = $(this);
    $.getJSON("http://www.blabla.com/bla",
        function(response){
            $this.data("ajax-data", response).val(response);
        }
    );
    $this.focus(function() { $this.val($this.data('ajax-data')); });
});