通过Ajax提交表单数据后的jQuery旋转

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

<form id="myForm">
  <input type="text" name="name" placeholder="姓名">
  <input type="email" name="email" placeholder="邮箱">
  <button type="submit">提交</button>
</form>

$(document).ready(function() {
  // 监听表单提交事件
  $('#myForm').submit(function(event) {
    event.preventDefault(); // 阻止表单默认提交行为

    // 获取表单数据
    var formData = $(this).serialize();

    // 显示旋转效果
    $('#myForm').addClass('loading');

    // 发送Ajax请求
    $.ajax({
      url: 'your_server_url',
      type: 'POST',
      data: formData,
      success: function(response) {
        // 处理成功响应
        // 可根据实际情况进行相应的操作
      },
      error: function() {
        // 处理错误响应
        // 可根据实际情况进行相应的操作
      },
      complete: function() {
        // 请求完成后的处理
        // 隐藏旋转效果
        $('#myForm').removeClass('loading');
      }
    });
  });
});

.loading {
  position: relative;
}

.loading::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}