Layui数据表格 前后端json数据接收的方法

当使用Layui数据表格时，前后端传输数据可以使用json数据格式。下面是使用json数据格式以及前后端json数据接收方法的完整攻略。

1. 前端传送json数据

前端使用layui.table.render()方法进行渲染表格，其中url参数可以指定后台接收json数据的url，也可以将json数据直接放在data参数中一同传送到后台。

示例1：传送url

前端使用以下代码将json数据传送到后台：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test', //绑定 table 的id
    url: '后台接收json数据的url', //接口地址
    cols: [[
      {field:'id', title: 'ID'},
      {field:'username', title: '用户名'},
      {field:'sex', title: '性别'},
      {field:'city', title: '城市'},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分'},
      {field:'score', title: '评分'},
      {field:'classify', title: '职业'},
      {field:'wealth', title: '财富'}
    ]],
    page: true //开启分页
  });
});

后台接收json数据的url中可以使用POST或GET方法进行数据接收，例如PHP后台接收json数据的代码如下：

$data = file_get_contents("php://input");
$json = json_decode($data);

示例2：传送参数中的json数据

前端使用以下代码将json数据放在data参数中传送到后台：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test', //绑定 table 的id
    data: [{
      "id": 1,
      "username": "张三",
      "sex": "男",
      "city": "北京",
      "sign": "人生格言",
      "experience": 55,
      "score": 88,
      "classify": "作家",
      "wealth": 100000
    }, {
      "id": 2,
      "username": "李四",
      "sex": "女",
      "city": "上海",
      "sign": "人生目标",
      "experience": 77,
      "score": 99,
      "classify": "诗人",
      "wealth": 777000
    }],
    cols: [[
      {field:'id', title: 'ID'},
      {field:'username', title: '用户名'},
      {field:'sex', title: '性别'},
      {field:'city', title: '城市'},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分'},
      {field:'score', title: '评分'},
      {field:'classify', title: '职业'},
      {field:'wealth', title: '财富'}
    ]],
    page: true //开启分页
  });
});

2. 后端接收json数据

后端使用不同的编程语言可通过不同的方式接收前端传来json数据，下面以PHP及Java分别介绍接收json数据的方法。

PHP

PHP后端可使用file_get_contents("php://input")函数获取到前端传来的json数据，然后使用json_decode()函数将其转换为PHP数据格式。示例代码如下：

$data = file_get_contents("php://input");
$json = json_decode($data);

其中，$json即为转换后的PHP数据。

Java

Java后端可使用HttpServletRequest类获取到前端传来的json数据，然后使用Gson类将其转换为Java数据格式。示例代码如下：

Gson gson = new Gson();
ServletInputStream in = request.getInputStream();
BufferedReader reader = new BufferedReader(new InputStreamReader(in, "UTF-8"));
StringBuffer sb = new StringBuffer("");
String line = "";
while ((line = reader.readLine()) != null) {
    sb.append(line);
}
String jsonStr = sb.toString();
JsonElement element = gson.fromJson(jsonStr, JsonElement.class);

其中，element即为转换后的Java数据。

3. 前端接收后端返回json数据

前端使用layui.table.render()方法可将后端返回json数据渲染成表格，需要在url参数或data参数中指定返回json数据的格式。

示例1：使用url参数获取后端返回的json数据

前端使用以下代码将后端返回的json数据渲染成表格：

layui.use('table', function(){
  var table = layui.table;

  table.render({
    elem: '#test', //绑定 table 的id
    url: '后端返回json数据的url', //接口地址
    parseData: function(res){ //将原始数据解析成 table 组件所规定的数据格式
      return {
        "code": res.code, //解析接口状态
        "msg": res.msg, //解析提示文本
        "count": res.total, //解析数据长度
        "data": res.rows //解析数据列表
      };
    },
    cols: [[
      {field:'id', title: 'ID'},
      {field:'username', title: '用户名'},
      {field:'sex', title: '性别'},
      {field:'city', title: '城市'},
      {field:'sign', title: '签名'},
      {field:'experience', title: '积分'},
      {field:'score', title: '评分'},
      {field:'classify', title: '职业'},
      {field:'wealth', title: '财富'}
    ]],
    page: true //开启分页
  });
});

后端返回的json数据格式需按照表格组件所规定的格式返回，例如PHP后端返回的json数据格式如下：

$result = array(
    "code"=> 0,
    "msg"=> "",
    "total"=> 100,
    "rows"=> $data
);
echo json_encode($result);

示例2：将后端返回的json数据放在data参数中传送

前端使用以下代码将后端返回的json数据渲染成表格：

layui.use('table', function(){
  var table = layui.table;

  $.get('后端返回json数据的url', function(res){
    table.render({
      elem: '#test', //绑定 table 的id
      data: res.data, //绑定数据源
      cols: [[
        {field:'id', title: 'ID'},
        {field:'username', title: '用户名'},
        {field:'sex', title: '性别'},
        {field:'city', title: '城市'},
        {field:'sign', title: '签名'},
        {field:'experience', title: '积分'},
        {field:'score', title: '评分'},
        {field:'classify', title: '职业'},
        {field:'wealth', title: '财富'}
      ]],
      page: true //开启分页
    });
  });
});

后端返回的json数据格式需符合表格组件所规定的数据格式，例如PHP后端返回格式如下：

$result = array(
    "code"=> 0,
    "msg"=> "",
    "data"=> $data
);
echo json_encode($result);

以上就是使用Layui数据表格及前后端json数据接收方法的完整攻略。