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

您也可能喜歡這些文章

Copyright © 2018 ucamc