jquery+zTree异步获取数据

最新推荐文章于 2021-11-26 15:43:08 发布

很帅的程程

最新推荐文章于 2021-11-26 15:43:08 发布

阅读量404

点赞数

分类专栏：前端文章标签： jquery javascript

本文链接：https://blog.csdn.net/qq_42289636/article/details/105981491

版权

前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

1.从数据库读取信息，然后渲染到前端页面。
在这里插入图片描述
HTML页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    <link rel="stylesheet" href="../css/demo.css" type="text/css">-->
    <link rel="stylesheet" href="../js/zTreeStyle/zTreeStyle.css" type="text/css">
    <script src="../js/jquery-3.5.0.js"></script>
    <script src="../js/jquery.ztree.all.js"></script>
</head>
<body>
<h1>最简单的树 -- 简单 JSON 数据</h1>
<div class="content_wrap">
    <div class="zTreeDemoBackground left">
        <ul id="treeDemo" class="ztree"></ul>
    </div>
</div>
</div>
</body>
<script>
    var setting = {
        async: {
            enable: true,
            url:"http://localhost:8080/cascade?method=getCompanys",
            type:'get',
            dataType:'json',
            // otherParam:{username:"zhangsan",age:10},
        },

        data: {
            simpleData: {
                enable: true,
                pIdKey:'parentId',
            }
        }
    };

    $(document).ready(function(){
        $.fn.zTree.init($("#treeDemo"), setting);
    });
</script>
</html>

数据库获取数据，返回

public class CompanyDaoImpl implements CompanyDao {
    @Override
    public List<Company> getCompany() {

        List<Company> company= new ArrayList<>();

        Connection conn = null;
        PreparedStatement ps = null;
        ResultSet rs = null;
        System.out.println("provinceId");
        String sql = "select * from company";

        try {
            conn = DbUtils.getConnection();
            ps=conn.prepareStatement(sql);

            rs=ps.executeQuery();

            //通过反射给对象赋值
            company= DataUtils.getAll(Company.class,rs);


        }catch (Exception e){
            e.printStackTrace();
        }
        DbUtils.close(rs,ps,conn);
        return company;
    }
}

Company 实体类，通过注解获取getset方法

package com.qf.domain;
import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

@Data
@NoArgsConstructor
@AllArgsConstructor
public class Company {
    private int id;
    private int parentId;
    private String name;
    }

Servlet 内容继承BaseServlet（自己写的）

@WebServlet(value = "/cascade", name = "CascadeServlet")
public class CascadeServlet extends BaseServlet {
    private CompanyService companyService = new CompanyServiceImpl();
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String methodName = req.getParameter("method");// getProvince   getCity   getDistrict

        try {
            // 例如说methodName=getProvince
            Method method = CascadeServlet.class.getDeclaredMethod(methodName, HttpServletRequest.class, HttpServletResponse.class);
//            Method method = CascadeServlet.class.getDeclaredMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);
            //具体方法调用
            // 当前对象调用 方法名叫 getProvince(HttpServletRequest x, HttpServletResponse y)
            method.invoke(this,req,resp);
            //相当于 this.getProvince(req, resp);
            System.out.println("cascade");
        }catch (Exception e){
            e.printStackTrace();
        }

    }
    private  void getCompanys(HttpServletRequest req, HttpServletResponse resp) throws IOException {
//        String id = getInitParameter("id");
        List<Company> companies = companyService.getCompany();
        System.out.println(companies);
        sendJson(resp,companies);
    }

BaseServlet 返回json数据

public class BaseServlet extends HttpServlet {

    protected void sendJson(HttpServletResponse response, Object object) throws IOException {

        String jsonStr = JSONObject.toJSONString(object);

        //返回json
        response.setHeader("Access-Control-Allow-Origin", "*");
        // 告诉浏览器，我这个谁都可以拿
        response.setContentType("application/json;charset=utf-8");

        PrintWriter pw = response.getWriter();
        pw.write(jsonStr);
    
        pw.flush();
        pw.close();
    }
}

很帅的程程

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery+zTree异步获取数据

1.从数据库读取信息，然后渲染到前端页面。HTML页面<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title><!-- <link rel="stylesheet" href=...
复制链接

扫一扫

专栏目录