后端传到前端(传一个集合,展示成表格)

controller层

     @RequestMapping("/showAll")@ApiOperation(value = "展示所有图书", httpMethod = "POST")public void showAll(HttpServletResponse resp,String lend) throws IOException {List<Book> bookList = userService.showAll();System.out.println(bookList);//确定后端已获得到数据库信息JSONArray books= JSONArray.fromObject(bookList);//将数据转为JSON数组/*设置编码，防止出现乱码问题*/resp.setCharacterEncoding("utf-8");/*得到输出流*/PrintWriter respWriter = resp.getWriter();respWriter.append(books.toString());}

JSONArray 在使用时需要在pom.xml文件中导入相关依赖

js部分

$(function () {$.ajax({url: 'showAll',//后端对应的接口type: 'get',dataType: 'json',success: function (books) {showData(books);console.log(books)},error: function (err) {console.log(err);}})})// 展示数据function showData(books) {let str = "";//定义用于拼接的字符串for (let i = 0; i < books.length; i++) {//拼接表格的行和列str = "<tr id='books[i].id'><td>" + books[i].id + "</td><td>" + books[i].bookName +"</td><td>" + books[i].author + "</td><td>"+ books[i].bookType + "</td><td>" + books[i].bookNumber +"</td><td>" + books[i].price + "</td><td>" +"<button id='books[i].id' index="+books[i].id+" class=lend>借阅</button></td><td>" +"<button id='books[i].id' index="+books[i].id+" class=back>归还</button></td></tr>";
//button及其属性可根据需要添加删除//追加到table中$("#bookList").append(str);}

前端向后端传值

js部分

        for(let i = 0; i < lend.length;i++) {lend[i].addEventListener('click',function () {let id = this.getAttribute('index')console.log(id)$.ajax({type: 'post',url: 'lend',//后端对应的接口名data:{id:id //要传的值},async:true,success:function (data) {console.log('发送id成功')},error:function (err) {console.log(err)}})})}}

controller层

@RequestMapping("/lend")@ApiOperation(value = "借阅图书", httpMethod = "GET")@ApiImplicitParam(name = "bookId", value = "图书编号")public void lend(HttpServletRequest request) {String id = request.getParameter("id");System.out.println(id);//测试是否从后端获取到数据userService.lend(id);}

感谢身边厉害之人的指导!
哈哈哈哈哈哈!

ajax与java后端互传数据相关推荐

ajax与Java后台互相传数据
目录 1. 简介 2.方法一: 3.方法二: 4.两种方法的对比 onreadystatechange 事件 5.总结 1. 简介这篇文章讨论的是ajax与Java后台互相传数据的功能,将会用到两种 ...
java处理表单变量_jsp处理表单及JS和JAVA变量互传
1:超连接跳转我们在超连接的时候,常常连接到一个jsp或者Action,比如: XXX 这样做会有一个问题:在test.jsp中,除你传递的param1和param2参数外,你用request.ge ...
人品测试器（Activity之间互传数据）
下面这个小程序是为了演示Activity之间怎么互传数据的,主要是intent里面的putExtra函数.基本数据的传输非常简单. package com.example.mytest;import ...
转 java c++互传arraylist
Java JNI由浅入深(包括:Java和C++互传ArrayList泛型对象参数) 2010-11-25 09:57 1694人阅读评论(1) 收藏举报我们知道Java是一个运行在虚拟机里面的 ...
两个云服务器怎么互传文件,两个云服务器互传数据
两个云服务器互传数据内容精选换一换云上容灾有三种场景,如表1所示.跨AZ容灾的方案如图1所示.该架构适用云上同城容灾,要求RPO等于0的场景.该方案下,RPO等于0,RTO小于30分钟.在平时业 ...
两部手机怎样才能把数据都传过来_新旧手机怎样互传数据？
原标题:新旧手机怎样互传数据? 手机是人们工作.学习和生活中必不可少的工具,很多人的手机使用一段时间之后都会换新的,新手机虽然好用,但是旧手机里面的东西也很有价值.要想用新手机的同时保留旧手机的数据, ...
树莓派和Windows电脑互传数据方法
树莓派和window怎么互传数据一.安装软件filezilla.exe 1. 可以自己去网上找 2. 百度网盘:链接提取码:n0q5 3. 打开filezilla 4. 点击快速连接即可
苹果手机利用itune和手机上的app电脑互传数据
苹果手机可以利用APP和电脑互传数据.
华为nova2s应用计算机,华为nova2s在手机和电脑之间互传数据？
匿名用户 1级 2018-03-03 回答选择 USB 连接模式通过 USB 数据线将手机连接至电脑或其他设备,手机将弹出[是否允许访问设备数据?]对话框. 点击[否,仅充电]. 从状态栏处向下滑 ...

ajax与java后端互传数据

文章目录

后端传到前端(传一个集合,展示成表格)

controller层

js部分

前端向后端传值

js部分

controller层

ajax与java后端互传数据相关推荐

最新文章

热门文章

ajax与java后端互传数据

文章目录

后端传到前端(传一个集合,展示成表格)

controller层

js部分

前端 向后端传值

js部分

controller层

ajax与java后端互传数据相关推荐

最新文章

热门文章

前端向后端传值