案例-查询所有

 

复制代码
package com.itheima.web;

import com.alibaba.fastjson.JSON;
import com.itheima.pojo.Brand;
import com.itheima.service.BrandService;

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.util.List;

@WebServlet("/selectAllServlet")
public class SelectAllServlet extends HttpServlet {
    //new一个BrandService对象以便使用方法
    private BrandService brandService = new BrandService();

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1. 调用Service查询
        List<Brand> brands = brandService.selectAll();

        //2. 将集合转为JSON数据  一般这个操作称为：序列化   反过来则是：反序列化
        String jsonString = JSON.toJSONString(brands);

        //3. 响应数据
        //防止中文乱码
        response.setContentType("text/json;charset=utf-8");
        response.getWriter().write(jsonString);

    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        this.doGet(request, response);
    }

}
复制代码
复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
    <tr>
        <th>序号</th>
        <th>品牌名称</th>
        <th>企业名称</th>
        <th>排序</th>
        <th>品牌介绍</th>
        <th>状态</th>
        <th>操作</th>
    </tr>
    <tr align="center">
        <td>1</td>
        <td>三只松鼠</td>
        <td>三只松鼠</td>
        <td>100</td>
        <td>三只松鼠，好吃不上火</td>
        <td>启用</td>
        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>2</td>
        <td>优衣库</td>
        <td>优衣库</td>
        <td>10</td>
        <td>优衣库，服适人生</td>
        <td>禁用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>

    <tr align="center">
        <td>3</td>
        <td>小米</td>
        <td>小米科技有限公司</td>
        <td>1000</td>
        <td>为发烧而生</td>
        <td>启用</td>

        <td><a href="#">修改</a> <a href="#">删除</a></td>
    </tr>
</table>
<!--     导入js-->
    <script src="js/axios-0.18.0.js"></script>

    <script>
        //1. 当页面加载完成后，发送ajax请求
        window.onload = function () {
            //2. 发送ajax请求
            axios({
                method:"get",
                url:"http://localhost:8080/brand-demo/selectAllServlet"
            }).then(function (resp) {
                //获取数组数据，并赋值给brands
                let brands = resp.data;
                //设置一个表格字符串tableDate
                let tableDate = "<tr>\n" +
                    "        <th>序号</th>\n" +
                    "        <th>品牌名称</th>\n" +
                    "        <th>企业名称</th>\n" +
                    "        <th>排序</th>\n" +
                    "        <th>品牌介绍</th>\n" +
                    "        <th>状态</th>\n" +
                    "        <th>操作</th>\n" +
                    "    </tr>";
                //遍历数组数据
                for (let i = 0; i < brands.length; i++) {
                    let brand = brands[i];

                    //调用tableDate的表格格式字符串
                    tableDate += "<tr align=\"center\">\n" +
                        "        <td>"+(i+1)+"</td>\n" +
                        "        <td>"+brand.brandName+"</td>\n" +
                        "        <td>"+brand.companyName+"</td>\n" +
                        "        <td>"+brand.ordered+"</td>\n" +
                        "        <td>"+brand.description+"</td>\n" +
                        "        <td>"+brand.status+"</td>\n" +
                        "\n" +
                        "        <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
                        "    </tr>"
                }
                //设置tableDate表格的格式数据，调用brandTable的格式数据
                document.getElementById("brandTable").innerHTML = tableDate;
            })
        }
    </script>
</body>
</html>
复制代码

 

posted @   Karlshell  阅读(14)  评论(0)  编辑  收藏  举报
相关博文：
·  案例-新增品牌
·  综合案例-查询所有-后台-前端
·  03每周总结
·  每周总结06
·  2023.2.27总结
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现
点击右上角即可分享
微信分享提示