《layui宇宙版教程》：数据表格table-3

本文链接：https://blog.youkuaiyun.com/ghyghost/article/details/108116014

《Layui宇宙版教程》提供2000人的QQ群进行交流学习，QQ群号：1046961650，或通过手机QQ扫描二维码进入：

1.23.4 异步数据接口

数据的异步请求由图1-xx所示的参数组成。

使用示例代码如下：

//“方法级渲染”配置方式

table.render({ //其它参数在此省略

url: '/api/data/'

//where: {token: 'sasasas', id: 123} //如果无需传递额外参数，可不加该参数

//method: 'post' //如果无需自定义HTTP类型，可不加该参数

//request: {} //如果无需自定义请求参数，可不加该参数

//response: {} //如果无需自定义数据响应名称，可不加该参数

});

等价于（“自动化渲染”配置方式）

1.23.4.1 发起get请求到Servlet

Servlet代码如下：

package controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test1")

public class Test1 extends HttpServlet {

protected void doGet(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("Test1 run doGet !");

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test1',

method: "get",

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

在F12中显示的运行结果如图1-xx所示。

1.23.4.2 发起post请求到Servlet

Servlet代码如下：

package controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test2")

public class Test2 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("Test2 run doPost !");

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test2',

method: "post",

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

在F12中显示的运行结果如图1-xx所示。

1.23.4.3 使用where属性

Servlet代码如下：

package controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test3")

public class Test3 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

System.out.println("Test3 run doPost !");

String username = request.getParameter("username");

String password = request.getParameter("password");

System.out.println(username + " " + password);

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test3',

method: "post",

where: {

"username": "中国",

"password": "中国人"

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

1.23.4.4 使用contentType: 'application/json'传递JSON

Servlet代码如下：

package controller;

import java.io.IOException;

import java.io.InputStream;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test4")

public class Test4 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

System.out.println("Test4 run doPost !");

int totalBytes = request.getContentLength();

InputStream inputStream = request.getInputStream();

byte[] byteArray = new byte[totalBytes];

inputStream.read(byteArray);

System.out.println(new String(byteArray, "utf-8"));

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test4',

method: "post",

where: {

"username": "中国",

"password": "中国人"

contentType: 'application/json;',

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

1.23.4.5 使用headers属性

Servlet代码如下：

package controller;

import java.io.IOException;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

@WebServlet("/Test5")

public class Test5 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

System.out.println("Test5 run doPost !");

System.out.println(request.getHeader("token"));

System.out.println(request.getHeader("mykey"));

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test5',

headers: {

"token": "123456789",

"mykey": "myvalue"

method: "post",

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

1.23.4.6 table处理服务端响应的数据

本实验依赖如下jar文件：

jackson-annotations-2.11.0.jar

jackson-core-2.11.0.jar

jackson-databind-2.11.0.jar

实体类Userinfo.java代码如下：

package entity;

public class Userinfo {

private int id;

private String username;

private String password;

public Userinfo() {

}

public Userinfo(int id, String username, String password) {

super();

this.id = id;

this.username = username;

this.password = password;

}

public int getId() {

return id;

}

public void setId(int id) {

this.id = id;

}

public String getUsername() {

return username;

}

public void setUsername(String username) {

this.username = username;

}

public String getPassword() {

return password;

}

public void setPassword(String password) {

this.password = password;

}

DTO类代码如下：

package dto;

import java.util.List;

public class LayuiTableBox {

private int code;

private String msg;

private int count;

private List data;

public LayuiTableBox() {

}

public LayuiTableBox(int code, String msg, int count, List data) {

super();

this.code = code;

this.msg = msg;

this.count = count;

this.data = data;

}

public int getCode() {

return code;

}

public void setCode(int code) {

this.code = code;

}

public String getMsg() {

return msg;

}

public void setMsg(String msg) {

this.msg = msg;

}

public int getCount() {

return count;

}

public void setCount(int count) {

this.count = count;

}

public List getData() {

return data;

}

public void setData(List data) {

this.data = data;

}

Table组件需要如下4个固定的属性名，建议不要更改。

private int code;

private String msg;

private int count;

private List data;

Servlet类代码如下：

package controller;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.ArrayList;

import java.util.List;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import com.fasterxml.jackson.databind.ObjectMapper;

import dto.LayuiTableBox;

import entity.Userinfo;

@WebServlet("/Test6")

public class Test6 extends HttpServlet {

protected void doPost(HttpServletRequest request, HttpServletResponse response)

throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

System.out.println("Test6 run doPost !");

String username = request.getParameter("username");

String password = request.getParameter("password");

System.out.println(username);

System.out.println(password);

List list = new ArrayList();

list.add(new Userinfo(1, "username1", "password1"));

list.add(new Userinfo(2, "username2", "password2"));

list.add(new Userinfo(3, "username3", "password3"));

list.add(new Userinfo(4, "username4", "password4"));

list.add(new Userinfo(5, "username5", "password5"));

LayuiTableBox box = new LayuiTableBox();

box.setCode(0);

box.setCount(5);

box.setData(list);

ObjectMapper mapper = new ObjectMapper();

String jsonString = mapper.writeValueAsString(box);

System.out.println(jsonString);

response.setContentType("application/json;charset=utf-8");

PrintWriter out = response.getWriter();

out.print(jsonString);

out.flush();

out.close();

}

测试代码如下：

<!DOCTYPE html>

<html>

<head>

</head>

<body>

var table = layui.table;

//第一个实例

table.render({

elem: '#demo',

url: 'Test6',

where: {

"username": "中国",

"password": "中国人"

method: "post",

page: true,

cols: [

[ //表头

{

field: 'id',

title: 'ID',

width: 200,

sort: true,

fixed: 'left'

}, {

field: 'username',

title: '账号',

width: 200

}, {

field: 'password',

title: '账号',

width: 200,

sort: true

}

]

});

</script>

</body>

</html>

运行结果如图1-xx所示。