我如何将这个jQuery代码转换成jQuery函数

How do i convert this jQuery code into jQuery function?

本文关键字：jQuery 代码 转换 函数      更新时间：2023-09-26

我有一些jQuery代码，这是一次又一次地重复，我想通过将其转换为函数来减少我正在编写的代码。这是我正在使用的代码。

$('form#save-user button[name="save-user"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = "index.php?users&option=edit&user_id="+msg+'&msg=success';
            }
        }
    });
});
$('form#save-user button[name="save-user-close"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = 'index.php?users';
            }
        }
    });
});
$('form#save-user button[name="save-user-new"]').click(function() {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = 'index.php?users&option=create';
            }
        }
    });
});

我想知道一些事情，

a)参考以上代码，我如何将其转换为函数，作为代码有很少的变化，如，选择器名称和window.location. Url

b)我怎么调用下面的代码，它是函数吗?函数的去了?还是动态函数?

$('selector').event(function(){
     //jQuery Code in wake of event being triggered.
});

我会为它写一个小插件:

(function ($) {
jQuery.fn.myClick = function (destination) {
    this.click(function () { 
        var formData = 'option=saveuser&'+$('form#save-user').serialize();
        $.ajax({
            type: 'POST',
            url:  'process.php',
            data: formData,
            success: function(msg){
                if(msg === 'empty') {
                    alert('Required Values Missing');
                } else if(msg === 'duplicateEmail'){
                    alert('Email already exist');
                } else {
                    window.location = destination(msg);
                }
            }
        });
    });
}
}(jQuery));

要调用它，你只需这样做:

$('form#save-user button[name="save-user-close"]').myClick(function() {
    return 'index.php?users&option=create';
});

和

$('form#save-user button[name="save-user"]').myClick(function (msg) {
    return "index.php?users&option=edit&user_id="+msg+'&msg=success';
});

你应该能看到我们要去哪里;我们正在为我们创建的小方法添加参数，您可以在其中指定每次调用之间的更改。

因为在这个实例中，window.location依赖于AJAX响应(当调用函数时我们不知道响应!)，所以我们不能简单地提供字符串(或类似的东西)作为参数。相反，我们传递一个函数，一旦收到AJAX响应就调用该函数，并将msg作为变量;并依赖函数提供一个字符串，我们将其设置为window.location。

关于你的第二个问题，你传递一个事件处理程序给jQuery事件方法;事件处理程序将是函数引用(通常是对匿名函数的引用)

a)我将首先将变化字段作为参数:

function doPost(redirectUrl) {
    var formData = 'option=saveuser&'+$('form#save-user').serialize();
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = redirectUrl.indexOf("{0}") >= 0 ? redirectUrl.replace("{0}", msg) : redirectUrl;
            }
        }
    });
}
$('form#save-user button[name="save-user"]').click(function() {
    doPost("index.php?users&option=edit&user_id={0}&msg=success");
});
$('form#save-user button[name="save-user-close"]').click(function() {
    doPost("index.php?users");    
});

b) 我将把它称为匿名事件处理程序(函数)。

这个应该可以帮你:

JQuery: 

function saveuser(formData) {
    $.ajax({
        type: 'POST',
        url:  'process.php',
        data: formData,
        success: function(msg){
            if(msg === 'empty') {
                alert('Required Values Missing');
            } else if(msg === 'duplicateEmail'){
                alert('Email already exist');
            } else {
                window.location = "index.php?users&option=...';
            }
        }
    });
}
HTML: 

<element onClick="saveuser('the-form-data')"></element>
相关文章：