Отправка формы по Ajax

Материал из Wiki МИАЦ ВО
Перейти к навигации Перейти к поиску

Отправка через serialize

var $form = $('#form_brifada');
$form.submit(function(event) {
  event.preventDefault(); // Для того, что бы форма не отправлялась по кнопке
  $.ajax({
    url: $form.attr('action'),  // Данные для формы берутся из ее параметров
    type: $form.attr('method'),
    data: $form.serialize(),  //  возвращает строку пригодную для передачи через URL строку 
    success: function(data) {  // При успешном выполнении, обрабатываем пришедшие данные
      data = JSON.parse(data); // data - данные пришедшие в json формате
      //console.log(data);
    },
    error: function() {
      alert('Произошла неизвестная ошибка. Попробуйте позже');
    }
  });
});

Оправка через FormData

Еще один вариант

$('.send-ajax').submit(function(e) {    // Форма отправляется при классе send-ajax
  e.preventDefault();                 // Запрещаем стандартную отправку
  $("input").removeAttr("disabled");  // Убираем атрибут disable у input (иначе такие данные не отправятся)
  var form =  $('.send-ajax').get(0); // You need to use standard javascript object here
  if($("table").is('.datatable') == true)  // Если используется js библиотека datatable и input поля в ней, 
  {                                     // то делаем сериализацию полей данных в таблице и преобразуем в FormData
    var data = new FormData(form);      // Сначала преобразуем поля вне таблицы
    var other_data = table.$('input,select,textarea').serializeArray();
    $.each(other_data,function(key,input)
    {
      data.append(input.name,input.value); // Добавляем поля из таблицы
    });
  } else var data = new FormData(form);  // Если таблицы нет, то делаем просто FormData
  if($("#editor").length)                 // Если используется CKEDITOR, то добавляем данные из него.
  {
    if(CKEDITOR.instances['editor'] != undefined)
    {
      data.append('content', CKEDITOR.instances['editor'].getData());
    }
  }
  $.ajax({
    cache: false,
    processData: false,  // tell jQuery not to process the data
    contentType: false,   // tell jQuery not to set contentType
    method: 'POST',       // Метод отправки формы
    //type: $(this).attr('method'),
    url: $(this).attr('action'),  // Url, куда отправляется форма
    data: data                    // Данные формы
  }).done(function(data) {
    $('.disabled').prop('disabled', true);  // Добавляем атрибут disable к input с классом disable
    var out = JSON.parse(data);
  }).fail(function() {
    console.log('fail');
  });  
});