ajax表单post提交【ajax 表单提交：示例代码】

温馨提示：这篇文章已超过287天没有更新，请注意相关的内容是否还可用！

AJAX（Asynchronous JavaScript and XML）是一种在不刷新整个页面的情况下，通过JavaScript向服务器发送请求并获取响应的技术。在网页开发中，我们经常会遇到需要通过表单提交数据的情况，而使用AJAX表单提交可以实现在不刷新页面的情况下将表单数据发送到服务器，并获取服务器返回的响应。

下面是一个示例代码，演示了如何使用AJAX表单提交：


<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function(){
      // 监听表单的提交事件
      $("form").submit(function(event){
        // 阻止表单的默认提交行为
        event.preventDefault();
        // 获取表单数据
        var formData = $(this).serialize();
        // 发送AJAX请求
        $.ajax({
          url: "submit.php", // 服务器端处理请求的URL
          type: "POST", // 请求的方法，这里是POST
          data: formData, // 发送的数据，这里是表单数据
          success: function(response){
            // 请求成功的回调函数
            alert("提交成功！");
          },
          error: function(){
            // 请求失败的回调函数
            alert("提交失败！");
          }
        });
      });
    });
  </script>
</head>
<body>
  <form>
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <button type="submit">提交</button>
  </form>
</body>
</html>

在上面的代码中，我们使用了jQuery库来简化AJAX请求的操作。我们通过`$(document).ready()`函数来确保页面加载完成后再执行代码。然后，我们监听了表单的提交事件，当用户点击提交按钮时，会触发这个事件。

在事件处理函数中，我们使用`event.preventDefault()`方法来阻止表单的默认提交行为，然后使用`$(this).serialize()`方法获取表单的数据，并将其序列化为URL编码的字符串。

接下来，我们使用`$.ajax()`方法发送AJAX请求。其中，`url`参数指定了服务器端处理请求的URL，`type`参数指定了请求的方法，这里是POST，`data`参数指定了发送的数据，这里是表单数据。

在`success`回调函数中，我们处理请求成功的情况，可以在这里进行一些操作，比如显示成功提示信息。在`error`回调函数中，我们处理请求失败的情况，可以在这里进行一些错误处理，比如显示错误提示信息。

通过上面的示例代码，我们可以实现使用AJAX表单提交，并在不刷新页面的情况下将表单数据发送到服务器。

ajax表单post提交【ajax 表单提交：示例代码】

相关阅读