layui和后端如何连起来

1. 什么是layui

layui是一款基于layui前端框架构建的一款轻量级的Web自定义模板系统，是一种快速开发后台页面的方式，它不需要其它任何第三方库依赖，对于前端开发人员的学习成本更低，并且它的文档详细，易于理解。使用layui能够快速搭建出符合规范的后台管理界面，提高开发效率。

2. layui如何与后端连起来

2.1 layui如何获取后端数据

Layui中有很多组件和核心的模块可以获取后端数据，其中 layui 的数据表格和ajax尤为重要，通过数据表格渲染数据，以及利用ajax进行数据的异步请求和传输。

下面的代码演示了如何使用layui的数据表格和ajax请求获取后端的数据：

<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script>
layui.use('table', function(){
  var table = layui.table;
  //展示已知数据
  table.render({
    elem: '#demo'
    ,url:'/demo/table/user/'   //接口地址
    ,page:true
    ,cols: [[ 
      {field:'id', title: 'ID', sort: true}
      ,{field:'username', title: '用户名'}
      ,{field:'sex', title: '性别', align:'center',width:80}
      ,{field:'city', title: '城市', width:120} 
    ]]
    ,skin: 'line' //行边框风格
  });
});
</script>
$.ajax({
    url:"/demo/table/user/",
    type:"post",
    data:{
       name:111
    },
    dataType:"json",
    success:function(data){
        console.log("获取到的后端数据：" + JSON.stringify(data));
    }
});

通过上述代码我们可以看出在layui的模板中，我们可以通过table模块的的api来实现页面内的表格展示，url属性定义了后端接口地址，通过访问该地址，来实现数据的展示。这里还演示了ajax异步请求获取后端数据的方法，实现了内容的向后台发送与接收。

2.2 layui如何将前端数据传输到后端

在前端，layui也提供了一些方便的方法，使前端数据向后端传输变得相对容易，其中最为重要的还是ajax请求。

下面的代码演示了layui通过ajax实现前端数据向后台的传输：

 layui.use('form', function(){
      var form = layui.form;
      //监听提交
      form.on('submit(demo)', function(data){
         $.ajax({
              url: "/demo/form",
              data: data.field,
              type:'post',
              dataType:'json',
              success: function(res){
                 console.log(JSON.stringify(res));
              },
              error:function(e){
                 console.log(e);
              }
         });
         return false;
      });
 });
 
<form class="layui-form" action="">
  <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 class="layui-btn" lay-submit lay-filter="demo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

在上述代码中，我们利用form.on中的submit监听事件，将表单数据通过ajax请求传输给后端，这里通过name属性获取表单元素的值，通过data.field来获取表单数据。注意要 return false来阻止默认的刷新操作。

3. 总结

本文简要讲述了layui与后端如何连起来，主要介绍了通过layui中的ajax异步请求获取后端数据和前端数据向后端传输的方法，更深层的开发和使用仍需GB18030查阅layui相关文档。