Jquery獲取form數據：如何使用Jquery獲取表單提交數據

一、Jquery是什麼？

在開始學習如何使用Jquery獲取表單提交數據之前，先來了解一下什麼是Jquery。Jquery是JavaScript庫，它主要用於簡化HTML文檔的遍歷、事件處理、和動畫等操作。Jquery最大的優點是，它能夠幫助開發人員用更少的代碼來完成相同的工作。因此，它非常適用於快速開發和跨瀏覽器的應用程序。

二、如何使用Jquery獲取表單數據？

使用Jquery獲取表單提交的數據，需要以下兩個步驟：

1、捕獲表單提交事件

在HTML中，使用form元素可以創建表單，使用submit事件可以捕獲提交事件。首先，通過Jquery選擇器選中表單元素，然後使用submit事件來捕獲表單的提交。

$( "form" ).submit(function( event ) {
  event.preventDefault();
});

在這段代碼中，我們使用了preventDefault()方法來阻止表單的默認行為，也就是阻止表單提交。因此，在接下來的代碼中，我們可以在不提交表單的情況下訪問表單中的數據。

2、獲取表單數據

接下來就可以獲取表單數據了。在Jquery中，可以使用val()方法、serialize()方法和serializeArray()方法來獲取表單數據。

val()方法

val()方法用於獲取表單元素的值。例如，我們要獲取表單中name屬性為username的輸入框的值，可以使用下面的代碼：

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var username = $( "input[name='username']" ).val();
  console.log( username );
});

上面的代碼中，我們使用Jquery選擇器選中了name屬性為username的輸入框，並用val()方法獲取了它的值。最後，使用console.log()方法將值輸出到控制台，以便於調試。

serialize()方法

serialize()方法用於序列化表單中的元素值。序列化是將表單元素的值編碼成URL編碼的字元串。可以用於將表單數據封裝成一個字元串，方便提交給伺服器。

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var form_data = $( this ).serialize();
  console.log( form_data );
});

在這段代碼中，我們使用this關鍵字來代替表單元素，使用serialize()方法對錶單數據進行序列化。最後，使用console.log()方法將序列化後的數據輸出到控制台。

serializeArray()方法

serializeArray()方法用於序列化表單為一個數組。對於Ajax請求，序列化為數組可以更加方便地處理數據。

$( "form" ).submit(function( event ) {
  event.preventDefault();
  var form_array = $( this ).serializeArray();
  console.log( form_array );
});

在這段代碼中，我們使用this關鍵字來代替表單元素，使用serializeArray()方法對錶單數據進行序列化，將序列化的結果存儲在form_array變數中。最後，使用console.log()方法將序列化後的數據輸出到控制台。

三、完整代碼示例

  
  
  
    $(document).ready(function(){
      $("form").submit(function(event){
        event.preventDefault();
        var username = $("input[name='username']").val();
        console.log(username);
        var form_data = $(this).serialize();
        console.log(form_data);
        var form_array = $(this).serializeArray();
        console.log(form_array);
      });
    });
  


  
    Username:
    


    Password: