Dodawanie wielu danych z jQuery AJAX

Question

mogę przetwarzanie moich wartości formularza przez ukierunkowanie klasie formularza <form class="my_form_class">:

jQuery.ajax({ 
     type:"GET", 
     url: "/wp-admin/admin-ajax.php", 
     data: my_form_class, 
     context: this, 
     success:function(data){ 

      // do stuff 
     } 
}); 

to działa świetnie.

Ale chcę dodać więcej danych, więc próbowałem:

data: { my_form_class, security : 'foo' }, 

To nie działa. Co ja tu robię źle? Próbowałem:

data: { my_form_class : my_form_class, security : 'foo' }, 

Oczywiście to też nie działało.

Answer 1

Według definicji jQuery ajax

dane

Typ: PlainObject lub String lub Array dane mają być wysyłane do serwera. Jest konwertowany na ciąg zapytania, jeśli nie jest już ciągiem. Jest on dołączany do adresu URL żądania GET. Zobacz opcję processData, aby zapobiec automatycznemu przetwarzaniu. Obiekt musi być parami klucz/wartość. Jeśli wartością jest tablica, jQuery szereguje wiele wartości za pomocą tego samego klucza na podstawie wartości tradycyjnego ustawienia (opisanego poniżej).

Można użyć jquery param i jQuery serialize:

$('.my_form_class').serialize() + '&' + $.param({security : 'foo'}); 

Moje urywek:

$(function() { 
 
    $('#btn').on('click', function(e) { 
 
    console.log($('.my_form_class').serialize() + '&' + $.param({security : 'foo'})); 
 
    $.ajax({ 
 
     type:"GET", 
 
     url: "/wp-admin/admin-ajax.php", 
 
     data: $('.my_form_class').serialize() + '&' + $.param({security : 'foo'}), 
 
     context: this, 
 
     success:function(data){ 
 
     // do stuff 
 
     } 
 
    }).fail(function(jqXHR, textStatus, errorThrown) { 
 
     console.log('ajax error: ' + textStatus) 
 
    }); 
 
    }); 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 

 
<form class="my_form_class"> 
 
    First name:<br> 
 
    <input type="text" name="firstname" value="name"><br> 
 
    Last name:<br> 
 
    <input type="text" name="lastname" value="surname"> 
 
</form> 
 
<button id="btn">Submit Form with Ajax</button>

Answer 2

danych formularza może być w odcinkach, a dane mogą być przesyłane jako ciąg :) nie testowałem, ale powinno działać :)

jQuery.ajax({ 
     type:"GET", 
     url: "/wp-admin/admin-ajax.php", 
     data: $('.my_form_class').serialize() + "&security=foo", 
     context: this, 
     success:function(data){ 

      // do stuff 
     } 
}); 

Answer 3

Zastosowanie FormData i pętla nad obiekt danych i dołączyć go jako

var fd = new FormData(); 
fd.append('key', value); 

$(function(){ 
 
    $('#btn').on('click',function(){ 
 
    var value = 'abc'; 
 
    var fd = new FormData(); 
 
    var my_form_data = { 
 
     fname: $('#firstname').val(), 
 
     lname: $('#lastname').val() 
 
    }; 
 
    for (var key in my_form_data) { 
 
     if (my_form_data.hasOwnProperty(key)) { 
 
     fd.append(key, my_form_data[key]); 
 
     } 
 
    } 
 
    fd.append('value', value); 
 
    console.log(fd); 
 
    jQuery.ajax({ 
 
      type:"GET", 
 
      url: "/wp-admin/admin-ajax.php", 
 
      data: fd, 
 
      context: this, 
 
      success:function(data){ 
 

 
       // do stuff 
 
      } 
 
    }); 
 
    }) 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="form_data"> 
 
    First name:<br> 
 
    <input type="text" id="firstname"><br> 
 
    Last name:<br> 
 
    <input type="text" id="lastname"> 
 
</form> 
 
<button id="btn">Submit</button>

Inny sposób obejmuje stosowanie .serialize(). Może być stosowany, gdy chcemy danych w ciągu kwerendy jako

var data = $('.my_form_data').serialize(); 
data += '&security=foo'; 

AJAX

jQuery.ajax({ 
     type:"GET", 
     url: "/wp-admin/admin-ajax.php", 
     data: data, 
     context: this, 
     success:function(data){ 

      // do stuff 
     } 
});