Написание общей функции AJAX с настраиваемым разделом успеха

Question

Я пытаюсь минимизировать количество похожих функций, которые я добавляю в свой код, написав одну общую функцию в jQuery. Когда дело доходит до отправки форм, верхняя часть кода AJAX более или менее одинакова для всех моих приложений, однако то, что происходит в разделе успеха, может сильно различаться между приложениями.

function general_submit_form(url, query, button, form) {
    $(document).on("click", button, function() {
        var data = $(this).closest('form').serialize();
        var url = url + '?' + query;
        $.ajax({
            type: 'POST',
            data: data,
            url: url,
            success: function(data) {
                console.log(data);
                if (data == 0) {
                    alert("Required parameters are empty!");
                } else if (data == 1) {
                    alert("Storage Space Added");
                        //fetch_storage_spaces();
                        $(form)[0].reset();
                        $(".custom_input").closest('tr').addClass('hidden');

                        fetch_storage_names("fetch_storage_names", "#storage_names");
                        fetch_all_storage_submit_forms();   
                    } else if (data == 2) {
                        alert("Storage name or serial taken");
                    }               
                }
            });
    }); 
}

Эта функция это пример общей функции, которую я пытаюсь написать. Могу ли я как-нибудь изменить то, что происходит внутри успешной части кода вне функции? В частности, внутри data == 1 оператора if?

Спасибо!

Answer 1

Вы также можете передать функцию успеха в качестве параметра.

function general_submit_form(url, query, button, form, success) {
    $(document).on("click", button, function() {
        var data = $(this).closest('form').serialize();
        var url = url + '?' + query;
        $.ajax({
          type: 'POST',
          data: data,
          url: url,
          success: success,
        });
    }); 
}

const success_fn = function(data) {
  console.log(data);
  if (data == 0) {
    alert("Required parameters are empty!");
  } else if (data == 1) {
    alert("Storage Space Added");
    //fetch_storage_spaces();
    $(form)[0].reset();
    $(".custom_input").closest('tr').addClass('hidden');

    fetch_storage_names("fetch_storage_names", "#storage_names");
    fetch_all_storage_submit_forms();   
  } else if (data == 2) {
      alert("Storage name or serial taken");
  }               
};

general_submit_form("url", "query", "button", "form", success_fn);

Answer 2

Для этого вы можете предоставить функцию в качестве аргумента для вызова general_submit_form(), который вы можете выполнить при правильном условии, примерно так:

function general_submit_form(url, query, button, form, successHandler) {
  $(document).on("click", button, function() {
    var data = $(this).closest('form').serialize();
    var url = url + '?' + query;

    $.ajax({
      type: 'POST',
      data: data,
      url: url,
      success: function(data) {
        console.log(data);
        if (data == 0) {
          alert("Required parameters are empty!");
        } else if (data == 1) {
          successHandler && successHandler(form); // invoke the callback here, passing the form and any other data
        } else if (data == 2) {
          alert("Storage name or serial taken");
        }
      }
    });
  });
}

general_submit_form('https://example.org/', 'abc=123', 'button', 'form', function(form) {
  alert("Storage Space Added");
  $(form)[0].reset();
  $(".custom_input").closest('tr').addClass('hidden');
  fetch_storage_names("fetch_storage_names", "#storage_names");
  fetch_all_storage_submit_forms();
});