探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识

.get 和 .post

.get

使用 .get 方法发送 HTTP GET 请求：

$.get("test.php", { name: "John", time: "2pm" })
    .done(function(data) {
        alert("Data Loaded: " + data);
    });

test.php ：请求的 URL 地址
{ name: "John", time: "2pm" } ：要发送的数据

.post

使用 .post 方法发送 HTTP POST 请求：

$.post("test.php", { name: "John", time: "2pm" })
    .done(function(data) {
        alert("Data Loaded: " + data);
    });

test.php ：请求的 URL 地址
{ name: "John", time: "2pm" } ：要发送的数据

注：两种方式的用法本质一样。只是在数据传递、数据量较大、安全等方面的处理上有些许区别。具体使用需要根据实际需求来选择。

.ajax

使用 .ajax 方法发送 HTTP 请求：

$.ajax({
    url: "test.php",
    type: "POST",
    data: {id : 01, name : "John"},
    success: function(data) {
        alert(data);
    },
    error: function() {
        alert("error");
    }
});

url ：请求的 URL 地址
type ：请求类型（GET 或 POST）
data ：要发送的数据
success ：成功回调函数
error ：失败回调函数

ztree

zTree 是一种快速、灵活的多功能 JavaScript 构建树的插件。下面是一个简单使用 zTree 实现树的代码：

<div id="tree"></div>

var setting = {
    data: {
        simpleData: {
            enable: true
        }
    }
};

var zNodes = [
    {id:1, pId:0, name:"父节点1 - 展开", open:true},
    {id:11, pId:1, name:"父节点11 - 折叠"},
    {id:111, pId:11, name:"叶子节点111"},
    {id:112, pId:11, name:"叶子节点112"},
    {id:113, pId:11, name:"叶子节点113"},
    {id:12, pId:1, name:"父节点12 - 折叠"},
    {id:121, pId:12, name:"叶子节点121"},
    {id:122, pId:12, name:"叶子节点122"},
    {id:123, pId:12, name:"叶子节点123"},
    {id:2, pId:0, name:"父节点2 - 折叠"},
    {id:21, pId:2, name:"父节点21 - 展开"},
    {id:211, pId:21, name:"叶子节点211"},
    {id:212, pId:21, name:"叶子节点212"},
    {id:213, pId:21, name:"叶子节点213"},
    {id:22, pId:2, name:"父节点22 - 折叠"},
    {id:221, pId:22, name:"叶子节点221"},
    {id:222, pId:22, name:"叶子节点222"},
    {id:223, pId:22, name:"叶子节点223"},
    {id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
];

$(document).ready(function(){
    $.fn.zTree.init($("#tree"), setting, zNodes);
});

后台 servlet 传递数据

使用 Java 后台 servlet，可以通过以下方式向前端传递数据。

使用 JSON 传递数据

使用 Gson 可以将 Java 对象转换为 Json 字符串。

protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
    Gson gson = new Gson();
    User user = new User("John", "john@example.com");
    String json = gson.toJson(user);
    resp.setContentType("application/json;charset=UTF-8");
    PrintWriter out = resp.getWriter();
    out.print(json);
    out.flush();
    out.close();
}

使用 Map 传递数据

使用 map 传递数据：

protected void doGet(HttpServletRequest request, HttpServletResponse resp) throws ServletException, IOException {
    Map<String, Object> map = new HashMap<>();
    map.put("name", "John");
    map.put("age", 25);
    map.put("email", "john@example.com");
    ObjectMapper mapper = new ObjectMapper();
    String json = mapper.writeValueAsString(map);
    resp.setHeader("Content-Type", "application/json;charset=utf-8");
    PrintWriter out = resp.getWriter();
    out.print(json);
    out.flush();
    out.close();
}

注：这里使用了 Jackson 库中的 ObjectMapper 类将 Java 对象转换为 Json 字符串。

示例

下面是一个完整的示例，演示了如何使用 zTree 自定义树、使用后台 servlet 数据传递、使用 .ajax 获取服务端传递的数据。

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>zTree</title>
        <meta charset="utf-8">
        <link href="css/zTreeStyle/zTreeStyle.css" rel="stylesheet">
    </head>
    <body>
        <div id="tree"></div>
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="js/jquery.ztree.core.js"></script>
        <script>
            var setting = {
                view: {
                    showIcon: false
                },
                data: {
                    simpleData: {
                        enable: true
                    }
                }
            };
            var zNodes = [
                {id:1, pId:0, name:"父节点1 - 展开", open:true},
                {id:11, pId:1, name:"父节点11 - 折叠"},
                {id:111, pId:11, name:"叶子节点111"},
                {id:112, pId:11, name:"叶子节点112"},
                {id:113, pId:11, name:"叶子节点113"},
                {id:12, pId:1, name:"父节点12 - 折叠"},
                {id:121, pId:12, name:"叶子节点121"},
                {id:122, pId:12, name:"叶子节点122"},
                {id:123, pId:12, name:"叶子节点123"},
                {id:2, pId:0, name:"父节点2 - 折叠"},
                {id:21, pId:2, name:"父节点21 - 展开"},
                {id:211, pId:21, name:"叶子节点211"},
                {id:212, pId:21, name:"叶子节点212"},
                {id:213, pId:21, name:"叶子节点213"},
                {id:22, pId:2, name:"父节点22 - 折叠"},
                {id:221, pId:22, name:"叶子节点221"},
                {id:222, pId:22, name:"叶子节点222"},
                {id:223, pId:22, name:"叶子节点223"},
                {id:3, pId:0, name:"父节点3 - 没有子节点", isParent:true}
            ];

            $(document).ready(function(){
                $.fn.zTree.init($("#tree"), setting, zNodes);
                $.ajax({
                    url: "getJsonData",
                    type: "GET",
                    dataType: "json",
                    success: function(data) {
                        console.log(data.name);
                        console.log(data.email);
                    },
                    error: function() {
                        alert("error");
                    }
                });
            });
        </script>        
    </body>
</html>

Java 后台：

public class GetJsonDataServlet extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        User user = new User("John", "john@example.com");
        Gson gson = new Gson();
        String json = gson.toJson(user);

        Map<String, Object> map = new HashMap<>();
        map.put("name", "John");
        map.put("email", "john@example.com");
        ObjectMapper mapper = new ObjectMapper();
        String mapJson = mapper.writeValueAsString(map);

        response.setContentType("application/json;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.print(mapJson);
        out.flush();
        out.close();
    }

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

访问 index.html 页面，控制台输出：

John
john@example.com

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：探讨.get .post .ajax ztree 还有后台servlet传递数据的相关知识 - Python技术站