使用 Ajax 提交表單

有時你可能有一個表單，並希望使用 ajax 提交它。

假設你有這個簡單的形式 -

<form id="ajax_form" action="form_action.php">
  <label for="name">Name :</label>
  <input name="name" id="name" type="text" />
  <label for="name">Email :</label>
  <input name="email" id="email" type="text" />
  <input type="submit" value="Submit" />
</form>

可以使用以下 jQuery 程式碼（在 $(document).ready 呼叫中） -

$('#ajax_form').submit(function(event){
  event.preventDefault();
  var $form = $(this);

  $.ajax({
      type: 'POST',
      url: $form.attr('action'),
      data: $form.serialize(),
      success: function(data) {
        // Do something with the response
      },
      error: function(error) {
        // Do something with the error
      }
  });
});

說明

• var $form = $(this) - 表單，快取以供重用
• $('#ajax_form').submit(function(event){ - 當提交 ID 為“ajax_form”的表單時，執行此函式並將該事件作為引數傳遞。
• event.preventDefault(); - 防止表單正常提交（或者我們可以在 ajax({}); 語句之後使用 return false，這將具有相同的效果）
• url: $form.attr('action'), - 獲取表單 action 屬性的值，並將其用於 url 屬性。
• data: $form.serialize(), - 將表單中的輸入轉換為適合傳送到伺服器的字串。在這種情況下，它將返回類似“name=Bob&email=bob@bobsemailaddress.com”的內容