Прокомментируйте код построчно

405

24 ноября 2016, 10:32

Здравствуйте, прошу помочь разобраться и понять следующий пример. Я нуждаюсь в объяснении данного кода, желательно прокомментировать построчно...

$(function(){
 $('#my_form').on('submit', function(e){
e.preventDefault();
var $that = $(this),
    fData = $that.serialize();
    ....
    // fData = $that.serializeArray();
$.ajax({
  url: $that.attr('action'),
  type: $that.attr('method'),
  data: {form_data: fData},
  dataType: 'json',
  success: function(json){
    if(json){
      $that.replaceWith(json);
    }
  }
   });
 });
  });

Answer 1

$(function(){ // Короткая запись $(document).on('ready'.. данная функция выполняется
//когда страница/документ готов к работе
  //на элемент с id="my_form" вешаем событие submit
  $('#my_form').on('submit', function(e){
    //Отключаем действие по умолчанию, без этой строчки форма будет отправляться без ajax
    e.preventDefault();
    //Присвоение переменной $that. Про this лучше прочитать получше, очень грубо
    //говоря все что есть у элемента, передастся в эту переменную this
    var $that = $(this);
    //fData будет равен строке в формате serialize ГЫ
    fData = $that.serialize();
    //В этой строчке fData будет равна массиву всех аргументов формы
    // fData = $that.serializeArray();
    //Готовим ajax запрос
    $.ajax({
      //У формы есть атрибут action, берем его и подставляем в адрес куда будет послан запрос
      url: $that.attr('action'),
      //У формы есть атрибут method в основном это POST,GET подставляем его
      type: $that.attr('method'),
      //Передаем данные из формы в формате serilize
      data: {form_data: fData},
      //Указываем что формат будет json
      dataType: 'json',
      //При успешном ответе принимаем значение json
      success: function(json){
        //Если данные есть, то...
        if(json){
          //пытаемся заменить $that тем что получили
          $that.replaceWith(json);
        }
      }
    });
  });
});