Layui和ssmController交互

最新推荐文章于 2023-12-25 09:09:08 发布

Hejxxx_

最新推荐文章于 2023-12-25 09:09:08 发布

阅读量1.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： ssm 文章标签： ssm layui

本文链接：https://blog.youkuaiyun.com/Jinx_vt_Lin/article/details/103377598

ssm 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍如何在HTML中利用layui框架实现动态表格加载，包括JS配置、跨域设置、Controller编写及数据返回格式，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、html中写

<table id="workList" class="layui-hide" lay-filter="workList"></table>

二、在js中写

function workList(){
	layui.use(['table','element'], function(){
		  var table = layui.table
		  ,form = layui.form;
		  var element = layui.element;
		  
		  //第一个实例
		  table.render({
		    elem: '#workList'
		    ,height: 312
		    ,url: 'http://localhost:8080/UserInfo/selectByVillage.do' //数据接口
		    ,page: true //开启分页
			,method: 'post'
			,where:{village:'wang'}
		    ,cols: [[ //表头
		      {field: 'name', title: '用户名'}
		      ,{field: 'telephone', title: '联系电话'}
		      ,{field: 'politicsStatus', title: '政治面貌'}
		      ,{field: 'officialRank', title:'职别'}
			  ,{field: 'currentJob', title: '现任职务'}
		    ]]
		  });
		});
}

elem对应于html中id为worklist的table标签

url是将要访问的接口，由于是跨域，要在html的头上加上一段

<meta http-equiv="Access-Control-Allow-Origin" content="*" />

where字段的作用旨在传递参数，当前意思为访问接口时带一个名叫village的参数，值为“wang”，访问方法是post
cols字段，直接将里面的field值对应于Controller返回的集合中，每一个对象的各个参数即可，layui会自动对号并输出，不需要你遍历，如果需要分页就用上面的page参数。

三、在controller中写

@Controller
@RequestMapping("UserInfo")
public class UserInfoController {
	@Autowired
    UserInfoService userInfoService;
    public String selectByVillage(HttpServletResponse response, @RequestParam("village") String village){
        response.setHeader("Access-Control-Allow-Origin","*");
        System.out.println(village);
        List<UserInfo> userInfos = (List<UserInfo>) userInfoService.selectUserInfoByVillage(village);
        int count = userInfos.size();
        Map<String,Object> map=new HashMap<String, Object>();
        map.put("code", 0);
        map.put("msg", "");
        map.put("count", count);
        map.put("data", userInfos);
        String res = JSON.toJSONString(map);
        return res;
    }
}

第一句response.setHeader(“Access-Control-Allow-Origin”,"*");，还是为了解决跨域的问题。
用到map的原因，是人家layui的开发者文档说了在这里插入图片描述
格式就是这样，这是文档连接，layui文档

本来照着网上的样例是直接传map的，但是我真的技术不行，捣鼓一天了也不能传map，一直显示没有转换器，最后只能选择在Controller里就将其转换成JSON格式，往前端传字符串，这是返回到前端的json数据。

{"code":0,"count":1,"data":[{"community":"nan","currentJob":"stu","gender":true,"idno":"370","name":"jinx","officialRank":"bronze","politicsStatus":"stu","telephone":"111","town":"yunshan","userid":"1","village":"wang"}],"msg":""}