serialize()方法使用標準URL編碼表示法創建文本字符串。它可以充當已經選擇個別表單控件,諸如jQuery對象上<input>,<textarea>和<select>:$( "input, textarea, select" ).serialize();通常更容易選擇<form>自身進行序列化:

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
  console.log( $( this ).serialize() );
});

在這種情況下,jQuery序列化表單中的成功控件。只form檢查元素是否包含它們包含的輸入,在所有其他情況下,要序列化的輸入元素應該是傳遞給.serialize()方法的集合的一部分。在集合中選擇表單及其子項將導致序列化字符串中出現重複。

注意:只有"成功控件"被序列化為字符串。沒有提交按鈕值被序列化,因為表單未使用按鈕提交。要使表單元素的值包含在序列化字符串中,該元素必須具有name屬性。複選框和單選按鈕(input "radio"或"checkbox"類型)的值僅在選中時才包括在內。文件選擇元素中的數據未序列化。

jQuery serialize demo

jQuery Ajax傳送表單方法

// this is the id of the form
$("#idForm").submit(function(e) {

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    e.preventDefault(); // avoid to execute the actual submit of the form.
});

使用物件json方式送出

若要使用Object方式送出,可以利用下面serializeObject轉換為物件,再送出到後端。

$.fn.serializeObject = function() {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name]) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

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

      var formData = $(this).serializeObject();
      console.log(formData);
      $('.datahere').html(formData);
    });
});

使用fromDate方式送出

使用fromDate可連同file檔案及資料表單資料name="user",name="password"一起傳送出取給後端接收。

Html

<form id="uploadForm" enctype="multipart/form-data">
    <input name='user' placeholder='user'><br>
    <input name='password' type='password' placeholder='password'><br>
    <input id="file" type="file" name="file"/>
    <button id="upload" type="button">upload</button>
</form>

Javascript

$('button').click(function(e){
    e.preventDefault();
    var form = $('form')[0];
    var formData = new FormData(form);
    $.ajax({
        url:'/upload',
        type : "POST",
        data : formData,
        contentType: false,
        cache: false,
        processData: false,
        success : function(data) 
        {
            console.log(data);
        },error: function(data) 
        {
            console.log('無法送出');
        }
    })
});

您也可能喜歡這些文章

Copyright © 2018 ucamc