表单联系 7 ajax 发送 - Javascript

在网页中，我们经常需要通过表单来收集用户的输入信息，并将其发送到服务器进行处理。传统的方式是通过 form 标签的 submit 方法来提交表单数据，但是这样会导致页面刷新，用户的使用体验会受到影响。因此，我们可以使用 ajax 技术来实现表单数据的提交，从而达到无刷新页面的效果。

ajax 简介

ajax（Asynchronous JavaScript And XML）指的是一种通过 JavaScript 发送 HTTP 请求和接收 HTTP 响应的技术。由于数据的传输是异步的，并且不需要刷新整个页面，因此可以提高页面的用户体验。

在 jQuery 中，我们可以使用 $.ajax() 方法来发送 ajax 请求。该方法有多个参数，包括 url、type、data、dataType 等，可以根据实际需要进行设置。以下是一个简单的示例：

$.ajax({
  url: 'http://www.example.com',
  type: 'POST',
  data: {
    name: '张三',
    age: 20
  },
  dataType: 'json',
  success: function(data) {
    console.log(data);
  },
  error: function(xhr, textStatus, errorThrown) {
    console.log(textStatus);
  }
});

上述代码中，我们发送了一个 POST 请求，将用户名和年龄作为参数发送到 http://www.example.com 接口，并期望返回一个 JSON 格式的数据。如果请求成功，我们会将返回的数据打印到控制台上；如果出现错误，我们则会打印错误信息。

表单提交

与普通的 ajax 请求相比，表单的提交需要进行一些特殊的处理。我们需要监听表单的 submit 事件，并阻止该事件的默认行为，即防止表单自动提交。然后，将表单数据序列化为字符串，并使用 $.ajax() 方法来发送请求。以下是一个示例：

$('form').submit(function(event) {
  event.preventDefault();  // 阻止表单自动提交

  var formData = $(this).serialize();  // 序列化表单数据

  $.ajax({
    url: 'http://www.example.com',
    type: 'POST',
    data: formData,
    dataType: 'json',
    success: function(data) {
      console.log(data);
    },
    error: function(xhr, textStatus, errorThrown) {
      console.log(textStatus);
    }
  });
});

上述代码中，我们使用 jQuery 选择器选中了页面中的所有 form 元素，并监听其 submit 事件。在事件处理程序中，我们首先阻止了表单的默认行为，然后使用 serialize() 方法将表单数据序列化为字符串，并作为 ajax 请求的参数发送到 http://www.example.com 接口。如果请求成功，我们会将返回的数据打印到控制台上；如果出现错误，我们则会打印错误信息。

总结

通过 ajax 技术，我们可以实现表单数据的提交，并达到无刷新页面的效果。在实际开发中，我们还可以添加一些验证功能，确保用户输入的数据符合要求。同时，我们也需要注意安全问题，例如 CSRF 攻击等。