jQuery 表单提交 AJAX - JavaScript

简介

AJAX技术能让用户在不刷新页面的情况下向服务器发出请求、从服务器接收数据、并把新的数据更新到当前页面上，这样可以提升用户的体验。

jQuery 是一种设计精巧、功能丰富并且被广泛使用的 JavaScript 库，能够使 JavaScript 编程更加容易。

本文将介绍如何使用 jQuery 实现 AJAX 技术来提交表单。

准备工作

在开始之前，需要准备以下工作：

引入 jQuery 库

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

编写 HTML 表单

<form id="my-form">
  <label for="name">Name: </label>
  <input type="text" id="name" name="name" required><br><br>
  <label for="email">Email: </label>
  <input type="email" id="email" name="email" required><br><br>
  <input type="submit" value="Submit">
</form>

AJAX 数据提交

当用户提交表单时，我们需要防止表单默认的行为，并且将数据通过 AJAX 发送到后端。

XHR 对象

首先需要了解 XHR 对象：XHR（XMLHttpRequest）对象用于在后台与服务器交换数据，它能够在不重载整个页面的情况下更新页面的部分内容。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://www.example.com');
xhr.send();

这是一个用于发送 GET 请求的 XHR 示例。

通过 xhr 对象的属性和方法，我们可以自由地控制 AJAX 请求的参数。但是，XHR 对象有一些旧的限制，例如在实现上较为复杂，不够友好，因此不建议使用。

使用 jQuery 进行 AJAX 请求

与 XHR 对象相比，使用 jQuery 进行 AJAX 请求可能更加方便。

$.ajax() 方法

$.ajax() 方法允许我们通过一个选项对象来自定义 AJAX 请求。

例如：

$.ajax({
  url: 'https://www.example.com',
  type: 'GET',
  data: { name: 'John', email: 'john@example.com' },
  success: function(response) {
    console.log('Response:', response);
  },
  error: function(xhr, status, errorThrown) {
    console.error('Request failed:', status, errorThrown);
  }
});

以下是 $.ajax() 方法的参数：

• url: 请求的 URL 地址
• type: 请求的方式（GET 或 POST）
• data: 发送到服务器端的数据，可为对象或字符串
• success: 请求成功后的回调函数
• error: 请求失败后的回调函数

$.post() 方法

$.post() 方法是 $.ajax() 方法的简化版，可以用于发送 POST 请求。

$.post('https://www.example.com', { name: 'John', email: 'john@example.com' }, function(response) {
  console.log('Response:', response);
});

以下是 $.post() 方法的参数：

• url: 请求的 URL 地址
• data: 发送到服务器端的数据，可为对象或字符串
• success: 请求成功后的回调函数

$.get() 方法

$.get() 方法是 $.ajax() 方法的简化版，可以用于发送 GET 请求。

$.get('https://www.example.com', function(response) {
  console.log('Response:', response);
});

以下是 $.get() 方法的参数：

• url: 请求的 URL 地址
• success: 请求成功后的回调函数

jQuery 表单提交 AJAX 实现

以下是实现表单提交 AJAX 的代码实例：

$(function() {
  $('form#my-form').submit(function(event) {
    event.preventDefault();
    var formData = $(this).serialize();
    $.post('https://www.example.com', formData, function(response) {
      console.log('Response:', response);
    });
  });
});

首先防止表单默认的行为，然后将表单数据序列化并通过 $.post() 方法发送到后台。最后，打印后台返回的响应数据。

总结

本文介绍了使用 jQuery 实现表单提交 AJAX 的方式和核心问题，知道了 jQuery.ajax()、$.post() 和 $.get() 方法的应用，以及如何将表单数据序列化并通过 AJAX 请求发送到后端。能够灵活运用这些知识，能够帮助我们更好地完成开发工作。