将form表单通过ajax实现无刷新提交的简单实例

下面我来详细讲解如何将form表单通过ajax实现无刷新提交的方法。

准备工作

首先，需要引入最新版的jQuery库，这里我们以CDN的方式引入：

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

然后，为了演示方便，我们需要在HTML页面中创建一个表单：

<form action="submit.php">
  <input type="text" name="name" placeholder="姓名">
  <input type="text" name="age" placeholder="年龄">
  <input type="submit" value="提交">
</form>

以上代码中，表单的action属性设置为submit.php，表示表单的提交地址是submit.php文件。

实现过程

1. 监听表单的submit事件
   当用户点击表单的提交按钮时，会触发表单的submit事件。我们可以通过jQuery来监听这个事件，并阻止表单的默认提交行为：

$('form').submit(function(event) {
  // 阻止表单的默认提交行为
  event.preventDefault();
});

1. 获取表单的数据
   表单提交之前，我们需要先获取表单中用户填写的数据。通过jQuery的serialize方法，可以方便地将表单中所有的数据序列化为一个字符串。同时，此方法也会自动对表单元素的name属性进行编码，以便于数据传输。下面是获取表单数据的代码：

$('form').submit(function(event) {
  event.preventDefault();

  // 获取表单的数据，并进行编码
  var formData = $(this).serialize();
});

1. 使用Ajax进行异步提交
   获取表单数据之后，我们就可以使用jQuery的ajax方法进行异步提交了。通过ajax方法的type和url属性分别指定提交方式和提交地址。此外，还可以通过data属性将表单数据传输到服务器端去。最后，使用success方法处理服务器端返回的数据。下面是ajax的简单实现：

$('form').submit(function(event) {
  event.preventDefault();

  var formData = $(this).serialize();

  // 使用ajax进行异步提交
  $.ajax({
    type: 'POST',
    url: 'submit.php',
    data: formData,
    success: function(data) {
      alert('提交成功！');
    }
  });
});

示例说明

下面通过两个实例来说明这个方法的具体使用。

示例一：表单提交后跳转到新的页面

如果表单提交成功之后需要跳转到新的页面，可以添加一个跳转地址到服务器端返回的数据中。下面是服务器端返回数据的示例代码：

<?php

// 处理表单提交之后的逻辑

// 跳转地址
$redirect = 'http://www.example.com';

// 返回数据
echo json_encode(array(
  'success' => true,
  'redirect' => $redirect
));

在ajax方法的success回调函数中，可以判断是否存在跳转地址，并通过window.location.href方法跳转到指定页面：

$('form').submit(function(event) {
  event.preventDefault();

  var formData = $(this).serialize();

  $.ajax({
    type: 'POST',
    url: 'submit.php',
    data: formData,
    success: function(data) {
      data = JSON.parse(data);

      if (data.success && data.redirect) {
        window.location.href = data.redirect;
      } else {
        alert('提交成功！');
      }
    }
  });
});

示例二：在页面上显示提交结果

如果表单提交成功之后需要在页面上显示提交结果，可以将服务器端返回的数据整合成HTML代码，并插入到页面中指定的元素中。下面是服务器端返回数据的示例代码：

<?php

// 处理表单提交之后的逻辑

// 返回数据
echo json_encode(array(
  'success' => true,
  'html' => '<p>提交成功！</p>'
));

在ajax方法的success回调函数中，可以判断是否存在需要显示的HTML代码，并通过jQuery的html方法将HTML代码插入到指定的元素中：

$('form').submit(function(event) {
  event.preventDefault();

  var formData = $(this).serialize();

  $.ajax({
    type: 'POST',
    url: 'submit.php',
    data: formData,
    success: function(data) {
      data = JSON.parse(data);

      if (data.success && data.html) {
        $('#result').html(data.html);
      } else {
        alert('提交成功！');
      }
    }
  });
});

以上就是将form表单通过Ajax实现无刷新提交的完整攻略和示例代码。