插件窝 干货文章 Jquery easyui异步提交表单的两种方式示例详解

Jquery easyui异步提交表单的两种方式示例详解

提交 表单 异步 script 396    来源:    2024-10-11

在Jquery easyui中,异步提交表单有两种方式:使用ajax方法和使用form组件的submit方法。下面我们将详细介绍这两种方式的示例。

使用ajax方法

<!DOCTYPE html>
<html>
<head>
  <title>异步提交表单示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
  <form id="myForm" method="post" action="submit.php">
    <input type="text" name="username" placeholder="请输入用户名" />
    <input type="password" name="password" placeholder="请输入密码" />
    <button id="submitBtn">提交</button>
  </form>
  <script>
    $(document).ready(function() {
      $('#submitBtn').click(function() {
        $.ajax({
          type: "POST",
          url: "submit.php",
          data: $('#myForm').serialize(),
          success: function(response) {
            alert('提交成功!');
          },
          error: function() {
            alert('提交失败!');
          }
        });
      });
    });
  </script>
</body>
</html>

在上面的示例中,我们给表单添加了一个id为“myForm”,然后使用ajax方法监听提交按钮的点击事件,当点击提交按钮时,通过serialize方法获取表单数据并异步提交到服务器。

使用form组件的submit方法

<!DOCTYPE html>
<html>
<head>
  <title>异步提交表单示例</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script type="text/javascript" src="jquery.easyui.min.js"></script>
</head>
<body>
  <form id="myForm" method="post" action="submit.php">
    <input type="text" name="username" placeholder="请输入用户名" />
    <input type="password" name="password" placeholder="请输入密码" />
    <button id="submitBtn">提交</button>
  </form>
  <script>
    $(document).ready(function() {
      $('#myForm').form({
        onSubmit: function() {
          $(this).form('submit', {
            success: function(response) {
              alert('提交成功!');
            },
            error: function() {
              alert('提交失败!');
            }
          });
          return false; // 阻止表单默认的提交行为
        }
      });
    });
  </script>
</body>
</html>

在上面的示例中,我们使用了form组件的onSubmit事件监听表单提交,当表单提交时,通过form组件的submit方法异步提交表单数据,同样实现了异步提交的效果。

通过上面的两种方式,我们可以灵活地根据实际需求选择适合的方式来实现Jquery easyui中的异步表单提交。