使用 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”的内容