Как мне преобразовать этот код jQuery в функцию jQuery?

Question

У меня есть несколько кодов 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) Как преобразовать его в приведенный выше код? функция, так как код имеет очень мало изменений, таких как, имя селектора и URL окна. Расположение.

b) как я называю приведенный ниже код, это функция? функция на идти? или динамическая функция?

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

Answer 1

Я бы написал для него небольшой плагин:

(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; обработчиком события будет ссылка на функцию (обычно ссылка на анонимную функцию )

Answer 2

а) Я бы начал с изменения полей в качестве параметров:

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");    
});    

б) Я бы назвал это анонимным обработчиком событий (функцией).

Answer 3

Это должно сделать это для вас:

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>