layui使用form表单实现post请求页面跳转的方法

当我们使用layui时，可以通过form表单的方式来实现post请求页面跳转。接下来将介绍layui使用form表单实现post请求页面跳转的方法的攻略。

步骤一：在页面中引入layui模块，引入form模块

<!-- 引入layui -->
<script src="path/layui/layui.js"></script>

<!-- 引入layui所需样式 -->
<link rel="stylesheet" href="path/layui/css/layui.css" />

layui.use('form', function(){
  var form = layui.form;
  // 表单操作写在这里
});

步骤二：编写form表单

<form action="/example" method="post" class="layui-form">
  <div class="layui-form-item">
    <label class="layui-form-label">用户名</label>
    <div class="layui-input-block">
      <input type="text" name="username" 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" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>

  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

其中，form元素必须添加 class="layui-form" 属性，button元素必须添加 lay-submit="" 和 lay-filter="demo1" 属性（demo1为自定义的layui表单事件名）。

步骤三：编写表单提交事件处理函数

form.on('submit(demo1)', function(data){
  console.log(data.field) // {username: 'zhangsan', password: '123456'}
  // 表单提交处理

  // 防止表单提交后页面跳转
  return false;
});

其中，data.field 为表单提交的参数，可以在这里进行表单提交的处理。最后返回 false 防止表单提交后页面跳转。

下面演示两条示例：

示例一：使用 Ajax 提交表单并获取后台返回的数据

form.on('submit(demo1)', function(data){
  $.ajax({
    type: 'POST',
    url: '/example',
    data: data.field,
    dataType: 'json',
    success: function(res) {
      if(res.code == 0) {
        layer.msg('登录成功');
      } else {
        layer.msg(res.message);
      }
    },
    error: function() {
      layer.msg('系统错误');
    }
  });
  return false;
});

使用jQuery库中的 $.ajax 方法提交表单，并获取后台返回的数据，根据返回结果进行对应的提示。

示例二：使用 window.location.href 实现页面跳转

form.on('submit(demo1)', function(data){
  window.location.href = '/example';
  return false;
});

使用 window.location.href 实现页面的跳转。