后端list集合中的数据传递到前台HTML中显示（表格形式）（转）

最新推荐文章于 2023-03-13 22:51:03 发布

广大菜鸟

最新推荐文章于 2023-03-13 22:51:03 发布

阅读量1.4k

点赞数 1

原文链接：https://www.cnblogs.com/baijinqiang/p/8594041.html

版权

转载于
https://www.cnblogs.com/baijinqiang/p/8594041.html

1、jsp内容：

<%@ page import="DB.book.book" %>
<%@ page import="java.util.List" %>
<%@ page import="Service.bookService.bookSearchServiceImpl" %><%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2020/6/24
  Time: 9:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
    <title>图书展示</title>
    <link rel="stylesheet" type ="text/css" href="http://localhost:8888/hello/net/css/style.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
    <script>
        window.onload=function (){
            $.ajax({
                url: "http://localhost:8888/hello/showBookServlet",
                type: "post",
                dataType: "json",
                success: function(data){
                    /*这个方法里是ajax发送请求成功之后执行的代码*/
                    showData(data);//我们仅做数据展示
                },
                error: function(msg){
                    alert("ajax连接异常："+msg);
                }
            });
        };
        //展示数据
        function showData(data) {
            var str = "";//定义用于拼接的字符串
            for (var i = 0; i < data.length; i++) {
                //拼接表格的行和列
                str = "<tr><td>" + data[i].BName + "</td><td>" + data[i].BNo + "</td><td>" + data[i].BAuthor +"</td></tr>";
                //追加到table中
                $("#tab").append(str);
            }
        }
    </script>
</head>

<body>
    <table id="tab">
        <tr>
            <th>书名</th>
            <th>编号</th>
            <th>作者</th>
        </tr>
    </table>

</body>
</html>

2、showBookServlet .jsp

package Servlet;

import DB.book.book;
import Service.bookService.bookSearchServiceImpl;
import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

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 java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.Map;

@WebServlet(name = "showBookServlet")
public class showBookServlet extends HttpServlet {
    protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        try {
            List<book> plist = new bookSearchServiceImpl().getBookJson();
            /*将list集合装换成json对象*/
            JSONArray data = JSONArray.fromObject( plist);
            //接下来发送数据
            /*设置编码，防止出现乱码问题*/
            response.setCharacterEncoding("utf-8");
            /*得到输出流*/
            PrintWriter respWritter = response.getWriter();
            /*将JSON格式的对象toString()后发送*/
            respWritter.append(data.toString());
        }
        catch (Exception ex) {
            ex.printStackTrace();
        }
    }
}
/*
  try {
            List<book> plist = new bookSearchServiceImpl().getBookJson();
            request.setAttribute("plist",plist);
            request.getRequestDispatcher("jsp/showBookList.jsp").forward(request,response);
            //response.sendRedirect("http://localhost:8888/hello/jsp/showBookList.jsp");

        }
        catch (Exception ex) {
            ex.printStackTrace();
        }
 */

广大菜鸟

关注

1
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
后端list集合中的数据传递到前台HTML中显示（表格形式）（转）

转载于https://www.cnblogs.com/baijinqiang/p/8594041.html1、jsp内容：<%@ page import="DB.book.book" %><%@ page import="java.util.List" %><%@ page import="Service.bookService.bookSearchServiceImpl" %><%-- Created by IntelliJ IDEA. User
复制链接

扫一扫