打卡

来源：2-8 自由编程

MengMengdacw

2021-07-24 14:20:10

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="width: 620px;">
    <form action="" method="get">
        <input style="width: 200px;" type="button"
               id="emp" name="emp" value="员工列表">

        <input style="width: 200px;" type="button"
               id="post" name="post" value="职位列表">

        <input style="width: 200px;" type="button"
               id="depar" name="depar" value="部门列表">
    </form>
    <div style="width: 600px; text-align: center;">
        <div id="content"></div>
    </div>
</div>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $("#emp").click(function () {
        ajaxMethod("/jquey/emplist?type=emp", true)
    })

    $("#post").click(function () {
        ajaxMethod("/jquey/emplist?type=post", true)
    })

    $("#depar").click(function () {
        ajaxMethod("/jquey/emplist?type=depar", true)
    })


    function ajaxMethod(url, eyac) {
        var httpXMl;
        if (window.XMLHttpRequest) {
            httpXMl = new XMLHttpRequest();
        } else {
            httpXMl = new ActiveXObject("Microsoft.XMLHTTP");
        }
        httpXMl.open("get", url, eyac);
        httpXMl.send();
        httpXMl.onreadystatechange = function () {
            // 异步回调
            var html = "";
            if (httpXMl.readyState == 4 && httpXMl.status == 200) {
                var json = httpXMl.responseText;
                var parse = JSON.parse(json);
                for (let i = 0; i < parse.length; i++) {
                    html = html+"<div>"+parse[i]+"</div>";
                }
            }
            $("#content").html(html)
        }
    }
</script>
</body>
</html>

package com.imooc.ajax;

import com.alibaba.fastjson.JSON;

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

@WebServlet("/emplist")
public class EmpListServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String type = req.getParameter("type");
        List<String> json = new ArrayList<String>();
        if ("emp".equals(type)) {
            // 员工
            json.add("小红");
            json.add("小明");
            json.add("小白");
        }else if ("post".equals(type)){
            json.add("职员");
            json.add("经理");
        }else if ("depar".equals(type)){
            json.add("人事部");
            json.add("技术部");
            json.add("无线业务部");
        }
        resp.setContentType("text/html;charset=utf-8");
        resp.getWriter().println(JSON.toJSONString(json));
    }
}