Thêm nhiều dữ liệu với jQuery ajax

Question

tôi có thể xử lý các giá trị hình thức của tôi bằng cách nhắm mục tiêu các lớp mẫu <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 
     } 
}); 

này hoạt động tuyệt vời.

Nhưng tôi muốn thêm nhiều dữ liệu hơn, vì vậy tôi cố gắng:

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

Nó đã không làm việc. Tôi làm gì sai ở đây? Tôi đã thử:

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

Và rõ ràng là nó không hoạt động.

Answer 1

Theo định nghĩa của jQuery ajax

dữ liệu

Loại: PlainObject hoặc string hoặc mảng dữ liệu được gửi đến máy chủ. Nó được chuyển thành chuỗi truy vấn, nếu chưa phải là một chuỗi. Nó được nối vào url cho các yêu cầu GET. Xem tùy chọn processData để ngăn việc xử lý tự động này. Đối tượng phải là cặp khóa/giá trị. Nếu giá trị là một mảng, jQuery nối tiếp nhiều giá trị với cùng một khóa dựa trên giá trị của cài đặt truyền thống (được mô tả bên dưới).

Bạn có thể sử dụng jquery param và jQuery serialize:

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

đoạn của tôi:

$(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

dữ liệu của biểu mẫu có thể được tuần tự, và dữ liệu có thể được gửi dưới dạng một chuỗi :) tôi đã không kiểm tra này, nhưng nó phải làm việc :)

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

Sử dụng FormData và lặp trên đối tượng dữ liệu của bạn và thêm nó như

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>

Phương pháp khác bao gồm sử dụng .serialize(). Nó có thể được sử dụng khi bạn muốn dữ liệu trong chuỗi truy vấn như

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 
     } 
});