正文

学会layui按钮表单普通提交，轻松实现数据入库与页面跳转技巧

/0 浏览量
0415

在开发过程中，我们经常需要处理表单数据的提交，并将其存储到数据库中，或者根据提交结果进行页面跳转。使用layui框架可以简化这一过程，让数据入库和页面跳转变得更加轻松。以下将详细介绍如何使用layui按钮表单进行普通提交，并实现数据入库与页面跳转。

一、准备环境

在使用layui之前，请确保你的项目中已经引入了layui的CSS和JavaScript文件。以下是一个简单的引入示例：

<!-- 引入layui CSS -->
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.css" media="all">

<!-- 引入layui JS -->
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.js"></script>

二、创建表单

首先，我们需要创建一个表单，包含需要提交的数据字段。以下是一个简单的表单示例：

<form class="layui-form" action="" id="myForm">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="button" class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
  </div>
</form>

三、配置layui表单

接下来，我们需要在JavaScript中配置layui表单，使其能够在提交时执行相应的操作。以下是一个示例：

layui.use(['form'], function(){
  var form = layui.form;
  
  // 监听提交
  form.on('submit(formDemo)', function(data){
    // 表单数据入库
    $.ajax({
      url: '/submit', // 数据提交的URL
      type: 'post',
      data: data.field,
      success: function(result){
        // 数据入库成功后的处理
        if(result.success){
          // 页面跳转
          window.location.href = '/success';
        }else{
          // 提示错误信息
          layer.msg(result.message);
        }
      },
      error: function(){
        // 请求失败的处理
        layer.msg('网络请求失败，请稍后再试！');
      }
    });
    
    return false; // 阻止表单跳转
  });
});

四、数据入库

在上面的代码中，我们使用了jQuery的Ajax方法将表单数据提交到服务器。在实际开发中，你需要根据后端接口的具体要求进行数据入库操作。以下是一个简单的PHP示例，用于接收并存储数据：

<?php
// 接收表单数据
$username = $_POST['username'];
$password = $_POST['password'];

// 数据入库操作（此处以MySQL为例）
// ...
?>

五、页面跳转

当数据入库成功后，我们可以通过修改window.location.href来实现页面跳转。在上面的代码中，当后端接口返回success字段为true时，会跳转到/success页面。

总结

通过以上步骤，我们可以轻松使用layui按钮表单进行普通提交，并实现数据入库与页面跳转。在实际开发中，请根据项目需求调整代码，确保数据安全和页面流畅。

-- 展开阅读全文 --