如何使用jQuery AJAX submit 傳送form表單方法

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('無法送出');
            }
        })
    });