Минимизация AJAX

277

16 сентября 2018, 13:30

Господа, на странице есть много разных форм с отправкой через AJAX

$('КАКАЯ-то ФОРМА').submit(function(){
        $.post('<?=Url::toRoute("КАКОЙ-то ЭКШН")?>', {
            'id_gift_reciever' : $('#id_gift_reciever').val(),
            'mem_date' : $('#mem_date').val(),
            //таких много разных 
        }, function() {
        })
        return false;
    });

Как бы написать такую штуку универсальную (где буду передаваться любые id input) не указывая поля явно

Answer 1

Как бы написать такую штуку универсальную (где буду передаваться любые id input) не указывая поля явно

Вот так, если в формах нет файлов:

$(document).ready(function() { 
  $('form').on('submit', function(e) { 
    e.preventDefault(); 
    // Обарботает поля в зависимости от того на какую нажато 
    let data = $(this).serializeArray(); 
    // Тут может идти ваш код для AJAX 
    // .... 
    console.log(data); 
  }) 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="" class="form1"> 
  <input type="text" name="in1.1"> 
  <input type="text" name="in1.2"> 
  <select name="sel" id=""> 
    <option value="0">Default</option> 
    <option value="1">You choose</option> 
  </select> 
  <button type="submit">Send 1</button> 
</form> 
<form action="" class="form2"> 
  <input type="text" name="in2.1"> 
  <input type="text" name="in2.2"> 
  <button type="submit">Send 2</button> 
</form>

UPD: Благодарю @andreymal

С обработкой файлов:

$(document).ready(function () { 
  $("form").submit(function(e) { 
    e.preventDefault();     
    var formData = new FormData(this); 
 
    $.ajax({ 
        url: 'https://jsonplaceholder.typicode.com/posts', 
        type: 'POST', 
        data: JSON.stringify(formData), 
        success: function (data) { 
            console.log(data) 
        }, 
        cache: false, 
        contentType: false, 
        processData: false 
    }); 
}); 
}); 
 
 
 
/*** 
var forms = document.querySelectorAll('form') 
 
forms.forEach(function (form) {  
  form.addEventListener('submit',function (e) {  
    e.preventDefault(); 
    let data = new FormData(e.target); 
    //console.log(e.target.classList[0]); 
    //let file = document.querySelector('.' + e.target.classList[0] +' > input[type="file"]') 
    //console.log(file.files); 
    //data.append(file.getAttribute('name'), file.files[0]) 
     
     var url = 'https://jsonplaceholder.typicode.com/posts' 
  fetch(url, { 
      method: 'post', 
      headers: { 
        "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
      }, 
      body: data // Отправка самой формы 
    }) 
    .then(response => response.json()) 
    .then((json) => { // Ответ 
      
      // Дебаг узнать что прошла форма 
      console.log(json) 
    }) 
    .catch(err => console.log(err)); 
  }) 
}) 
****/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form action="" class="form1"> 
  <input type="text" name="in1.1"> 
  <input type="text" name="in1.2"> 
  <select name="sel" id=""> 
    <option value="0">Default</option> 
    <option value="1">You choose</option> 
  </select> 
  <button type="submit">Send 1</button> 
</form> 
<form action="" class="form2"> 
  <input type="text" name="in2.1"> 
  <input type="text" name="in2.2"> 
  <input type="file" name="myFile2"> 
  <button type="submit">Send 2</button> 
</form>

serializeArray - функция не требует явного указания полей, но надо в полях указывать атрубут name для коректной работы.
FormData - позваляет создать ключ значение из формы для поледующей передачи по AJAX.