AJAX 增删改查

1.1 首页布局

1.2 获取用户信息

A  在首页发送ajax请求


<div class="row">

    <div class="col-md-1" style="background-color: #3a3d4c;height: 600px;">
        <a href="/day02/stu"  target="right" class="btn btn-block btn-link " style="color: white;">学生管理</a>
        <a href=""  target="right"  class="btn btn-block btn-link"  style="color: white;">班级管理</a>
        <a href="" target="right" class="btn btn-block btn-link"  style="color: white;">课程管理</a>
        <a href="" target="right" class="btn btn-block btn-link"  style="color: white;">修改密码</a>
        <a href="/day02/logout"  class="btn btn-block btn-link"  style="color: white;">注销</a>
    </div>
    <div class="col-md-11" style="margin: 0;padding: 0;">
        <iframe src="" name="right" width="99%" height="600px" ></iframe>
    </div>

</div>



<script src="/day03/js/jq.js"></script>
<script>

    /*页面渲染 就发送ajax请求 获取用户信息*/
    $.get("/day03/admin/getAdmin" ,function( backData){   }   );

</script>

B  servlet处理业务

@WebServlet("/admin/*")
public class AdminServlet  extends HttpServlet {
    /**
     *   http://192.168.2.8:8080/day03/admin/login
     *   http://192.168.2.8:8080/day03/admin/logout
     *   http://192.168.2.8:8080/day03/admin/changePassword
     */
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String uri = req.getRequestURI();
        String contextPath = req.getContextPath();
        String servletPath = req.getServletPath();

        StringBuilder append = new StringBuilder().append(contextPath).append(servletPath).append("/");

        String path = uri.replace(append, "");

        resp.setContentType("text/json;charset=UTF-8");

        if(  "login".equals(path)  ){
              login(req,resp);
        }else if("logout".equals(path)){
              logout(req,resp);
        }else if("changePassword".equals(path)){
              changePassword(req,resp);
        }else if("getAdmin".equals(path)){
            getAdmin(req,resp);
        }else{
              other(req,resp);
        }
    }
    protected void getAdmin(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Object user = req.getSession().getAttribute("user");

        PrintWriter out = resp.getWriter();

        if(user == null){
            String string = JSON.toJSONString( Result.fail() );
            out.write(string);
        }else{
            String string = JSON.toJSONString( Result.sucess(user) );
            out.write(string);
        }

        out.close();
    }

题外话  专门用来返回ajax的结果类
    

public class Result {

    private int  code;
    private String msg;
    private Object  data;


    public Result() {

    }

    public Result(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }


    public static  Result  sucess(){
        return  new Result(1,"操作成功",null);
    }
    public static  Result  sucess(Object  data){
        return  new Result(1,"操作成功",data);
    }

    public static  Result  fail(){
        return  new Result(2,"操作失败",null);
    }

    public int getCode() {
        return code;
    }

    public void setCode(int code) {
        this.code = code;
    }

    public String getMsg() {
        return msg;
    }

    public void setMsg(String msg) {
        this.msg = msg;
    }

    public Object getData() {
        return data;
    }

    public void setData(Object data) {
        this.data = data;
    }
}

3  ajax接收响应数据并展示
    
    <div style="height: 80px;background-color: #00a6a6;color: white;">
    欢迎来到学生管理系统 <br/>
    欢迎尊敬的VIP用户：  <span id="adminName">  </span>
    <img   id="adminImg"  src=""  width="20px">
</div>
    
 /*页面渲染 就发送ajax请求 获取用户信息*/
    $.get("/day03/admin/getAdmin" ,function( backData){
        // backData =  {"code":1,"data":{"password":"456","headImg":"https://img2.baidu.com/it/u=1549486128,453727358&fm=26&fmt=auto&gp=0.jpg","nickname":"张三","id":1,"emai

        if(backData.code == 1) {
            // 注意 别忘了给标签添加id
            adminImg.src = backData.data.headImg;
            adminName.innerHTML = backData.data.nickname;
        }else{
            window.location.href = "/day03";
        }

    } );

2.1：添加

1 页面 +  获取班级信息
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

</head>
<body>


<div class="form-group">
    <label >学生姓名</label>
    <input  class="form-control"   id="name"    placeholder="请输入学生姓名">
</div>
<div class="form-group">
    <label >学生性别</label>
    <input  class="form-control"   id="sex"  placeholder="请输入学生姓名">
</div>
<div class="form-group">
    <label >学生生日</label>
    <input  class="form-control"   type="date"  id="birthday" placeholder="请输入学生姓名">
</div>
<div class="form-group">
    <label >学生班级</label>
    <select   id="gid"  > </select>
</div>
<button type="submit" class="btn btn-block btn-danger">添加新学生</button>

<script src="/day03/js/jq.js"></script>
<script>

    $.get("/day03/grade/getAll",function (backData) {
        
    });



</script>

</body>
</html>


2 班级处理
    @WebServlet("/grade/*")
public class GradeServlet extends HttpServlet {

    private GradeDAO gradeDAO = new GradeDAOImpl();

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String uri = req.getRequestURI();
        String contextPath = req.getContextPath();
        String servletPath = req.getServletPath();

        StringBuilder append = new StringBuilder().append(contextPath).append(servletPath).append("/");

        String path = uri.replace(append, "");

        resp.setContentType("text/json;charset=UTF-8");


        if ("getAll".equals(path)) {

            getAll(req, resp);

        }else {

        }

    }

    protected void getAll(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {


        List<Map<String, Object>> list = gradeDAO.listAllGrade();

        String string = JSON.toJSONString(Result.sucess(list));

        PrintWriter out = resp.getWriter();
        out.write(string);
        out.close();

    }
}

3 展示班级信息
<script>

    $.get("/day03/grade/getAll",function (backData) {

          for (var  i=0;i<backData.data.length;i++){
              $("<option  value='"+backData.data[i].gid+"'> "+ backData.data[i].gname  +" </option>").appendTo("#gid");
          }
    });



</script>

    4 添加按钮发送请求
  <button type="submit" class="btn btn-block btn-danger"  id="addBtn">添加新学生</button>

<script src="/day03/js/jq.js"></script>
<script>

    $.get("/day03/grade/getAll",function (backData) {

          for (var  i=0;i<backData.data.length;i++){
              $("<option  value='"+backData.data[i].gid+"'> "+ backData.data[i].gname  +" </option>").appendTo("#gid");
          }
    });

    addBtn.onclick = function () {
        // 表单验证

        var  parm = {
            name: $("#name").val()  ,
            sex: $("#sex").val()  ,
            birthday: $("#birthday").val()  ,
            gid: $("#gid").val()
        };

        $.post("/day03/stu/addStu", parm ,function (backData) {
            
        }  )

    }



</script>

5 后台处理
    protected void addStu(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String name = req.getParameter("name");
        String sex = req.getParameter("sex");
        String birthday = req.getParameter("birthday");
        String gid = req.getParameter("gid");

        Student student = new Student(name, sex, birthday, gid);

        int i = studentDAO.saveStudent(student);

        PrintWriter out = resp.getWriter();
        if(i>0){
            out.write(JSON.toJSONString(Result.sucess()));
        }else{
            out.write(JSON.toJSONString(Result.fail()));
        }
        out.close();

    }

6 前端响应
<button type="submit" class="btn btn-block btn-danger"  id="addBtn">添加新学生</button>
<a type="submit" class="btn btn-block btn-primary"  href="/day03/student.html">返回首页</a>
<div class="" id="msg"></div>

<script src="/day03/js/jq.js"></script>
<script>

    $.get("/day03/grade/getAll",function (backData) {

          for (var  i=0;i<backData.data.length;i++){
              $("<option  value='"+backData.data[i].gid+"'> "+ backData.data[i].gname  +" </option>").appendTo("#gid");
          }
    });

    addBtn.onclick = function () {
        // 表单验证

        var  parm = {
            name: $("#name").val()  ,
            sex: $("#sex").val()  ,
            birthday: $("#birthday").val()  ,
            gid: $("#gid").val()
        };

        $.post("/day03/stu/addStu", parm ,function (backData) {
              msg.innerHTML = backData.msg;
        }  )

    }

</script>