Truyền toàn bộ biểu mẫu dưới dạng dữ liệu trong hàm jQuery jQuery

Tôi có một hàm jQuery ajax và muốn gửi 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 để việc cập nhật liên tục các đầu vào biểu mẫu sẽ được gửi trong yêu cầu trở nên tẻ nhạt.

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

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

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

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

Giả sử rằng chúng ta có một biểu mẫu với id này: "myform".

giải pháp tốt hơn là tạo 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
        }
    });

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

Xin lưu ý rằng nhiều tùy chọn <select> được tuần tự hóa dưới 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ẽ dẫn đến một chuỗi truy vấn bao gồm nhiều lần xuất hiện của cùng một tham số truy vấn:

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

có thể không phải là những gì bạn muốn trong phần phụ trợ.

Tôi sử dụng mã JS này để giảm nhiều tham số thành một khóa đơn được phân tách bằng dấu phẩy (được sao chép một cách không biết xấu hổ từ phản hồi của người bình luận trong một chủ đề tại vị trí của John Resig):

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

mà biến những điều trên thành:

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

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

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

Mong rằng sẽ giúp.

Sử dụng

nối tiếp ()

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

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

Một tùy 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 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>

Hàm 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 vào biểu mẫu của bạn, bạn có thể sử dụng một đầu vào ẩn trong biểu mẫu của mình hoặc bạn thêm nó một cách nhanh chóng:

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

Bạn chỉ cần đăng dữ liệu. và Sử dụng tham số jjery ajax đặt tham số. Đâ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>

Các giải pháp khác không hiệu quả với tôi. Có lẽ DOCTYPE cũ trong dự án tôi đang làm việc ngăn các tùy chọn HTML5.

Giải pháp của tôi:

<form id="form_1" action="result.php" method="post"
 onsubmit="sendForm(this.id);return false">
    <input type="hidden" name="something" value="1">
</form>

js:

function sendForm(form_id){
    var form = $('#'+form_id);
    $.ajax({
        type: 'POST',
        url: $(form).attr('action'),
        data: $(form).serialize(),
        success: function(result) {
            console.log(result)
        }
    });
}