代码之家 › 专栏 › 技术社区 › KérdezösködÅ Indián

jQuery-全局函数的使用

ajax jquery javascript

KérdezösködÅ Indián · 技术社区 · 7 年前

$( document ).ready(function() {
    ...
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            success: function (response) {
                // PARSING THE JSON, EXTRACTING THE ID FROM IT
                // AND PERFOMING THE EDIT
            }
        });
    })
    ...
    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            success: function (response) {
                // PARSING THE JSON, EXTRACTING THE ID FROM IT
                // AND PERFOMING THE DELETE
            }
        });
    })
    ...
});

我想要的是一个全局函数,它获取键值,执行AJAX调用并根据模式返回值。

$( document ).ready(function() {
    ...
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        var value = GLOBAL_FUNCTION(key, pattern_edit);
        // PERFOMING THE EDIT
    })
    ...
    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        var value = GLOBAL_FUNCTION(key, pattern_delete);
        // PERFOMING THE DELETE
    })
    ...
});

全局\u函数(p\u键,p\u模式) 功能?内部或外部功能?如何从这个全局函数返回响应?如果解析响应的结果产生一个值列表呢?

2 回复 | 直到 7 年前

Rory McCrossan Hsm Sharique Hasan 7 年前

我应该把它放哪儿 GLOBAL_FUNCTION(p_key, p_pattern) 功能?在ready函数的内部还是外部?

你可以把它放在任何你想叫它的地方。全球化是一种可能性,但应尽可能避免。相反,我建议将公共函数命名为它们自己的对象。这样,您就可以将它们提取到一个单独的JS文件中,以便于重用。

如果函数发出AJAX请求,则不能返回任何内容,因为调用应该是异步的。您可以通过提供一个回调函数在请求完成时执行来解决这个问题。

// common.js
var common = (function() { 
  return {
    global_function: function(key, callback) {
      $.get('/ede/' + key + '/json', function(response) {
        // perform common actions here, if needed..
        callback && callback(response);
      }
    }
  };  
})();

// in your page:
$('button.icons8.icons8-edit-file').on("click", function() {
    var key = $(this).data('key');
    common.global_function(key, function(response) {
      // Edit response.id...
    });
});

$('button.icons8.icons8-delete-file').on("click", function() {
    var key = $(this).data('key');
    common.global_function(key, function(response) {
      // Delete response.id...
    });
});

最后,注意 data() data-key 相反

eisbehr 7 年前

您可以将函数置于jqueryready状态,并在两个回调中使用它们。不是真的 ,但在这两种情况下都是在正确的范围内使用的。

但是 GLOBAL_FUNCTION $.ajax 是异步的。但是您可以将回调传递给函数,在完成后执行。

JSON 格式,所以它会自动为您解析它。

$( document ).ready(function() {
    function GLOBAL_FUNCTION(key, type, callback) {
        $.ajax({
            url: '/ede/' + key + '/json',
            method: 'POST',
            dataType: 'json,
            success: function (response) {
                // EXTRACTING THE ID FROM RESPONSE 
                var id = response.id;
                
                if (type === 'edit') {
                  // PERFOMING THE EDIT
                }
                
                if (type === 'delte') {
                  // PERFOMING THE DELETE
                }
                
                // EXECUTE CALLBACK ON FINISH
                callback(id, type);
            }
        });
    };
    
    $('button.icons8.icons8-edit-file').on("click", function(){
        var key = $(this).attr('key');
        GLOBAL_FUNCTION(key, 'edit', (id, type) => {
            console.log(type + ' of id #' + id + ' finished');
        });
    })

    $('button.icons8.icons8-delete-file').on("click", function(){
        var key = $(this).attr('key');
        GLOBAL_FUNCTION(key, 'delete', (id, type) => {
            console.log(type + ' of id #' + id + ' finished');
        });
    })
    
});