Vượt qua toàn bộ biểu mẫu dưới dạng dữ liệu trong hàm jQuery Ajax

Question

Tôi có chức năng jQuery ajax và muốn toàn bộ biểu mẫu dưới dạng dữ liệu bài đăng. Chúng tôi liên tục cập nhật biểu mẫu để nó trở nên tẻ nhạt để liên tục cập nhật các đầu vào biểu mẫu sẽ được gửi trong truy vấn.

Answer 1

Có một chức năng thực hiện chính xác này:

http://api.jquery.com/serialize/

var data = $('form').serialize(); 
$.post('url', data); 

Answer 2

Sử dụng

serialize()

var str = $("form").serialize(); 

Serialize một hình thức để một chuỗi truy vấn, mà có thể được gửi đến một máy chủ trong một yêu cầu Ajax.

Answer 3

Trong sử dụng chung serialize() trên các yếu tố hình thức.

Hãy lưu ý rằng nhiều tùy chọn < chọn > được đăng theo cùng một khóa, ví dụ:

<select id="foo" name="foo" multiple="multiple"> 
    <option value="1">one</option> 
    <option value="2">two</option> 
    <option value="3">three</option> 
</select> 

sẽ cho kết quả trong một chuỗi truy vấn bao gồm nhiều lần xuất hiện của tham số truy vấn giống nhau:

[path]?foo=1&foo=2&foo=3&someotherparams... 

mà có thể không được những gì bạn muốn trong backend.

tôi sử dụng này JS mã để giảm nhiều tham số để một chìa khóa bằng dấu phẩy duy nhất (không biết xấu hổ sao chép từ phản ứng của một commenter trong một thread qua tại nơi John Resig của):

function compress(data) { 
    data = data.replace(/([^&=]+=)([^&]*)(.*?)&\1([^&]*)/g, "$1$2,$4$3"); 
    return /([^&=]+=).*?&\1/.test(data) ? compress(data) : data; 
} 

mà biến trên thành:

[path]?foo=1,2,3&someotherparams... 

Trong mã JS của bạn, bạn muốn gọi nó là như thế này:

var inputs = compress($("#your-form").serialize()); 

Hy vọng rằng sẽ giúp.

Answer 4

serialize() không phải là ý tưởng hay nếu bạn muốn gửi biểu mẫu bằng phương thức bài đăng. Ví dụ nếu bạn muốn truyền một tập tin qua ajax thì nó sẽ không hoạt động.

các giải pháp tốt hơn là để thực hiện một FormData và gửi nó:

var myform = document.getElementById("myform"); 
    var fd = new FormData(myform); 
    $.ajax({ 
     url: "example.php", 
     data: fd, 
     cache: false, 
     processData: false, 
     contentType: false, 
     type: 'POST', 
     success: function (dataofconfirm) { 
      // do something with the result 
     } 
    }); 

Answer 5

Một lựa chọn jQuery tốt để làm điều này là thông qua FormData. Phương pháp này cũng phù hợp khi gửi tệp thông qua biểu mẫu!

<form id='test' method='post' enctype='multipart/form-data'> 
    <input type='text' name='testinput' id='testinput'> 
    <button type='submit'>submit</button> 
</form> 

chức năng gửi của bạn trong jQuery sẽ trông như thế này:

$('form#test').submit(function(){ 
    var data = new FormData($('form#test')[ 0 ]); 

    $.ajax({ 
     processData: false, 
     contentType: false, 

     data: data, 
     dataType: 'json', 
     type: $(this).attr('method'); 
     url: 'yourapi.php', 
     success: function(feedback){ 
     console.log("the feedback from your API: " + feedback); 
     } 
}); 

để thêm dữ liệu mẫu của bạn, bạn có thể sử dụng một đầu vào ẩn trong hình thức của bạn, hoặc bạn có thêm nó một cách nhanh chóng:

var data = new FormData($('form#test')[ 0 ]); 
data.append('command', 'value_for_command'); 

Answer 6

<form id="add-item-form"> 
    . . . 
</form> 

<script> 
    $('#add-item-form').submit(function (event) { 
     event.preventDefault(); 
     var data = $('#add-item-form').serialize(); 
     $.post("/Item/AddItem", data, function (response) { 
      . . . 
     }); 
    }); 
</script> 

Answer 7

Bạn chỉ phải đăng dữ liệu. và Sử dụng các tham số thiết lập hàm jquery ajax. Đây là một ví dụ.

<script> 
     $(function() { 

      $('form').on('submit', function (e) { 

       e.preventDefault(); 

       $.ajax({ 
        type: 'post', 
        url: 'your_complete url', 
        data: $('form').serialize(), 
        success: function (response) { 
         //$('form')[0].reset(); 
         // $("#feedback").text(response); 
         if(response=="True") { 
          $('form')[0].reset(); 
          $("#feedback").text("Your information has been stored."); 
         } 
         else 
          $("#feedback").text(" Some Error has occured Errror !!! ID duplicate"); 
        } 
       }); 

      }); 

     }); 
    </script>