利用AjaxSubmit()方法实现Form提交表单后回调功能

2023年6月10日下午7:47 • JavaScript

要实现Form提交表单后回调功能，我们可以使用jQuery中的AjaxSubmit()方法。这个方法可以使用ajax方式提交表单，而且可以在提交表单后回调函数中处理返回的数据。

下面是实现的详细步骤：

1.引用jQuery库和jQuery.form插件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>

2.编写HTML表单。表单中包含一个提交按钮和一个用于显示提交结果的div。

<form id="myForm" action="submit.php" method="post">
  <input type="text" name="username" placeholder="用户名">
  <input type="password" name="password" placeholder="密码">
  <button type="submit">提交</button>
</form>

<div id="result"></div>

3.编写jQuery代码。在代码中，我们使用AjaxSubmit()方法提交表单，并在回调函数中处理返回的数据。

$(document).ready(function(){
  $('#myForm').ajaxForm({
    dataType: 'json',
    success: function(data){
      if(data.status == 'success'){
        $('#result').html(data.message);
      }else{
        $('#result').html(data.message);
      }
    }
  });
});

其中，ajaxForm()方法是jQuery.form插件中的方法，用于将一个表单转化为ajax方式提交的表单。在这个方法中，我们可以配置一些选项，比如dataType表示返回的数据类型，success表示成功回调函数。

4.编写服务端代码。在本例中，我们使用PHP编写服务端代码submit.php。这个代码接收表单提交的数据，并返回一个JSON格式的结果。

<?php
  $username = $_POST['username'];
  $password = $_POST['password'];

  if($username == 'admin' && $password == '123456'){
    $result = array('status' => 'success', 'message' => '登录成功');
  }else{
    $result = array('status' => 'fail', 'message' => '用户名或密码错误');
  }

  echo json_encode($result);
?>

至此，我们就实现了利用AjaxSubmit()方法实现Form提交表单后回调功能。

下面是示例说明：

示例1：实现简单的表单提交功能

以下代码用于实现一个简单的表单提交功能。表单中包含一个文本框和一个提交按钮。当用户点击提交按钮后，表单数据将被提交到submit.php服务端处理，并且将处理结果显示在页面上。

<!DOCTYPE html>
<html>
<head>
  <title>AjaxSubmit示例1</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
  <form id="myForm" action="submit.php" method="post">
    <input type="text" name="name" placeholder="输入姓名">
    <button type="submit">提交</button>
  </form>
  <div id="result"></div>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#myForm').ajaxForm({
        dataType: 'json',
        success: function(data){
          if(data.success){
            $('#result').html('提交成功');
          }else{
            $('#result').html('提交失败');
          }
        }
      });
    });
  </script>
</body>
</html>

示例2：加入图片上传功能

以下代码用于实现一个上传图片的功能。用户点击上传按钮后，将弹出文件选择对话框，用户选择一个图片后，即可上传到服务器。上传完成后，页面将显示上传结果。

<!DOCTYPE html>
<html>
<head>
  <title>AjaxSubmit示例2</title>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.3.0/jquery.form.min.js"></script>
</head>
<body>
  <form id="myForm" action="submit.php" method="post" enctype="multipart/form-data">
    <input type="file" name="image">
    <button type="submit">上传</button>
  </form>
  <div id="result"></div>
  <script type="text/javascript">
    $(document).ready(function(){
      $('#myForm').ajaxForm({
        dataType: 'json',
        success: function(data){
          if(data.success){
            $('#result').html('上传成功');
          }else{
            $('#result').html('上传失败');
          }
        }
      });
    });
  </script>
</body>
</html>

其中，我们需要设置form的属性enctype="multipart/form-data"，以便支持文件上传。另外，我们还需要设置dataType为json，以便在回调函数中处理返回的JSON格式的结果。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：利用AjaxSubmit()方法实现Form提交表单后回调功能 - Python技术站