AJAX 修改

smart_呆呆

于 2022-05-18 12:04:24 发布

阅读量670

点赞数 3

文章标签： ajax javascript linq

本文链接：https://blog.csdn.net/weixin_48658948/article/details/124839595

版权

1.修改按钮发送请求并跳转

<td>
            <button class="btn  btn-danger"   onclick="deleteStu(ccc)"  >删除</button>
            <a class="btn  btn-primary"    href="/day03/update.html?id=ddd"    >修改</a>
        </td>
    </tr>
</script>

<script src="/day03/js/jq.js"></script>
<script>
    $.get( "/day03/stu/getAll" , function (backData) {
        for(var i=0;i<backData.data.length;i++    ){
            var obj = backData.data[i];
            var  str =   temp.innerHTML.replace("xxx",obj.id)
                                       .replace("yyy",obj.name)
                                       .replace("zzz",obj.sex)
                                       .replace("aaa",obj.birthday)
                                       .replace("bbb",obj.gname)
                                       .replace("ccc",obj.id)
                                       .replace("ddd",obj.id);
            t.firstElementChild.innerHTML+= str;
        }
    });

2：update.html发送请求获取数据

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

    var  id =  window.location.href.split("=")[1];
    
    $.get( "/day03/grade/getAll" , function (backData) {
        
    });
    
    
    $.get("/day03/stu/getOne?id="+id ,function (backData) {
        
    });


</script>

3：通过id查询

protected void getOne(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    String id = req.getParameter("id");

    Map<String, Object> stu = studentDAO.getStudentByID(id);

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

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

}

4：展示数据

<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"  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>

    var  id =  window.location.href.split("=")[1];
    
    $.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");
        }
    });
    
    $.get("/day03/stu/getOne?id="+id ,function (backData) {
        //{"code":1,"data":{"birthday":"2021-04-14","gid":3,"sex":"123213","name":"呵呵123123","id":140},"msg":"操作成功"}
        $("#name").val(  backData.data.name );
        $("#sex").val(  backData.data.sex );
        $("#birthday").val(  backData.data.birthday );
        $("#gid").val(  backData.data.gid );
    });

</script>

5：按钮添加点击事件

addBtn.onclick = function () {
    // 1 校验
    var  parm = {
        "id":id,
        "name": $("#name").val()  ,
        "sex": $("#sex").val()  ,
        "birthday": $("#birthday").val()  ,
        "gid": $("#gid").val()
    };
    $.post("/day03/stu/updateStu",parm,function (backData) {
        
    });
}

6： servlet更新

protected void updateStu(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");
    String id = req.getParameter("id");


    Student student = new Student(Integer.parseInt(id), name, sex, birthday, gid);


    int i = studentDAO.updateStudentById(student);

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


}

smart_呆呆

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX 修改

1.修改按钮发送请求并跳转<td> <button class="btn btn-danger" onclick="deleteStu(ccc)" >删除</button> <a class="btn btn-primary" href="/day03/update.html?id=ddd" >修改</a> </td> </tr&g
复制链接

扫一扫