Ajax实战用户管理系统-完成数据初始化

简介: Ajax实战用户管理系统-完成数据初始化
+关注继续查看

通过 Ajax 完成页面数据初始化

    <script>
        $(function () {
            //获取页面初始化数据
            getData();
            //添加按钮绑定点击事件
            $("#add").click(function(){
                addOrUpdateUser("addUser");
            });
            //更新按钮绑定点击事件
            $("#update").click(function(){
                addOrUpdateUser("updateUser");
            });
        });
        //获取页面初始化数据
        function getData(){
            $.getJSON("user.do",{flag:"getData"},function (result) {
                init(result);
            });
        }
        //遍历数据生成数据
        function init(obj){
            var str ="";
            $.each(obj,function(){
                str+= "<tr align='center'><td id='"+this.userid+"'>"+this.userid +"</td><td>"+this.username+"</td><td>"+this.usersex+"</td><td>"+this.userbirth+"</td><td><a href='#' onclick='preUpdateUser("+this.userid+")'>选择更新</a>&nbsp;&nbsp;&nbsp;<a href='#' onclick='deleteUser("+this.userid+")'>删除</a></td></tr>"
            });
            $("#tBody").prepend(str);
        }
   </script>

创建 Servlet 处理页面数据初始化请求

/**
 * 用户管理Servlet
 */
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
    //生成模拟数据初始化
    @Override
    public void init() throws ServletException {
        User user = new User();
        user.setUserid(1);
        user.setUsername("Oldlu");
        user.setUsersex("male");
        user.setUserbirth(new Date());
        User user2 = new User();
        user2.setUserid(2);
        user2.setUsername("Kevin");
        user2.setUsersex("male");
        user2.setUserbirth(new Date());
        List<User> list = new ArrayList<>();
        list.add(user);
        list.add(user2);
        ServletContext servletContext = this.getServletContext();
        servletContext.setAttribute("list",list);
    }
 
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req, resp);
    }
 
    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
            String flag = req.getParameter("flag");
            if("getData".equals(flag)){
                this.getData(req,resp);
            }else if("addUser".equals(flag)){
                this.addUser(req,resp);
            }else if("updateUser".equals(flag)){
                this.updateUser(req,resp);
            }else{
                this.deleteUser(req,resp);
            }
    }
 
    //获取页面初始化数据
    private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        List<User> list = (List<User>) this.getServletContext().getAttribute("list");
        String s = JsonUtils.objectToJson(list);
        resp.setContentType("application/json");
        PrintWriter pw = resp.getWriter();
        pw.print(s);
        pw.flush();
        pw.close();
    }
}

3 运行效果

image

目录
相关文章
|
13天前
|
JSON 前端开发 数据格式
ajax请求解析json数据渲染在前端界面
ajax请求解析json数据渲染在前端界面
13 0
|
13天前
|
JSON 前端开发 数据格式
ajax请求模拟json数据并且拼接到html
ajax请求模拟json数据并且拼接到html
13 0
|
18天前
|
JSON 前端开发 数据格式
【前端统计图】echart多条折线图ajax请求json数据
【前端统计图】echart多条折线图ajax请求json数据
12 0
|
18天前
|
JSON 前端开发 数据格式
【前端统计图】echart折线图ajax请求json数据
【前端统计图】echart折线图ajax请求json数据
13 0
|
18天前
|
JSON 前端开发 JavaScript
ajax请求接口,jquery拼接数据循环
ajax请求接口,jquery拼接数据循环
12 0
|
20天前
|
JSON 数据格式
jQuery+ajax解析json数据渲染
jQuery+ajax解析json数据渲染
14 0
|
24天前
|
JSON 前端开发 JavaScript
ajax和axios请求本地json数据对比
ajax和axios请求本地json数据对比
23 1
|
4月前
|
前端开发
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
如何对ajax请求的后台数据添加到swiper轮播图并展示到页面
57 0
|
4月前
|
前端开发
如何用ajax请求后台数据的两种全网最实用且详细的写法
如何用ajax请求后台数据的两种全网最实用且详细的写法
55 0
|
4月前
|
数据采集 前端开发 JavaScript
Python爬虫实战:抽象包含Ajax动态内容的网页数据
Python爬虫实战:抽象包含Ajax动态内容的网页数据
相关产品
云迁移中心
推荐文章
更多