2022年五月26号Ajax+Json+Mvc+JdbcTemplate+Servlect+Html+JavaScript+Jquery+Mysql对本项目的数据进行修改数据内容:修改功能如何实现。

目录

2022年五月26号Ajax+Json+Mvc+JdbcTemplate+Servlect+Html+JavaScript+Jquery+Mysql对本项目的数据进行修改数据内容:修改功能如何实现。

今天 *** 作的功能是修改功能如何修改呢?利用的知识点是Ajax+Json+Html+JavaScript+Jquery.+Mysql.

第一部份的内容:先分析修改功能的思路.

理清思路:用户要修改数据库中的信息，要如何进行呢?大致执行流程如下所示.

第1步:定义一个按键增加的事件为onclick事件:οnclick=updateStudent()运用到的知识点是JavaScript

第2步:问你一个问题当你单机修改页面你要获得的表中的Id 学生的编号为 id

//定义方法用于修改按钮function updateStudent(id) {    alert("开始修改数据信息")    //解决任何请求是否需要Ajax,是否需要Ajax请求 不需要用Ajax 判断返回的Json格式    //又是思考一个问题你要修改数据的页面需要返回到。本页面吗？我一定会跳到一个修改页面    //所以在本页面不需要Ajax请求    //我要将id发送给服务器    location.href = "StudentUpdateServlet?id=" + id;}

第3步:创建的servlect为:StudentUpdateServlet.

String id = request.getParameter("id"); 在StudentUpdateServlet将浏览器的id转到数据库中.

第4步:将学生的信息存放在session对象中：利用session对象将id存放起来request.getSession().setAttribute("id",id);

第5步: 跳转到修改页面的信息内容:利用servlect中的重定向方式。

response.sendRedirect("StudentUpdate.html");

第6步:构架修改页面Html基本页面大纲内容.

第7步: 运行页面如下所示.在这上面你会发现下面为空。

第8步:接下来的是思考如何将修改的数据返回到页面哦！

第9步:分析上面的代码应该在java代码中用什么方式存放起来这关系到你定义的接口文件.

Map getInfoStudentById(int id);,>

第10步:将上面的数据层接口的方法实现.

第11步:在业务逻辑层中定义接口.

Map getInfoStudentById(int id);,>

第12步:将上面的逻辑层层接口的方法实现.

第13步:在控制层中要分析两步:

第14步:在控制层中利用session对象获得数据库中的id

String id = (String) request.getSession().getAttribute("id");

第15步:在控制层中调用业务逻辑层的方法.

第16步:在观察下面效果图:

​编辑

​编辑

第17步:上面的效果实现的一级联动:上面的效果如何实现呢?请看下面代码？

第18步:如果你对Mvc三层架构的非常熟悉的话?你会发现两条数据少了.如果少了两句代码上面的mvc三层架构的有实现不了层层连接。

IStudentService service = new StudentServiceImp();

IStudentDao dao = new StudentDaoImp();

第19步:在思考下面的五部分内容如何封装成Json格式呢？

第20步:利用map集合方式封装起来

第21步在浏览器中的审查元素中查看Json格式.

第22步:上面的Json格式如何转换&利用属性选择器将数据库的信息展示在页面

 $("input[name=name]").val(json.infoStudentById.name)//展示数据库中的姓名                    $("input[name=age]").val(json.infoStudentById.age)//将数据库中的年龄展示在页面中                    $("input[name=phone]").val(json.infoStudentById.phone)                    $("input[name=address]").val(json.infoStudentById.address)                    if (json.infoStudentById.sex = "男") {                        $("input[value='男']").attr("checked", true)                    } else {                        $("input[value='女']").attr("checked", true)                    }

第23步

第24步

第25步

第26步

​编辑

第27步：在页面上的数据信息如何返回到数据库中更新呢？

第28步:在业务逻辑层的实现类中:如何实现数据层的连接。

IStudentDao dao = new StudentDaoImp();

第29步:同理在控制层中:如何连接业务逻辑层呢？

IStudentDao dao = new StudentDaoImp();

第30步:接下来从Dao层开始:

第31步:从数据层的接口中开始:

int  updateStudent(Map map);,>

第32步:在定义业务逻辑层的接口

int updateStudent(Map map, int id);,>

第33步:

public class StudentServiceImp implements IStudentService {}

第34步:

public class StudentDaoImp implements IStudentDao {}

第35步:数据层的实现类中:

第36步:业务逻辑层的实现的类：

第37步:

return dao.updateStudent(m);

第38步:在控制层中首先完成下面的方法

第39步:获得session中存放的id.

Map parameterMap = request.getParameterMap();String id = (String) request.getSession().getAttribute("id");,>

第40步:response.sendRedirect("workList1.html");利用重定向

修改功能

@Override
public Map getInfoStudentById(int id) {
    return DBUtil.jt.queryForMap("select *  from student where  id=?", new Object[]{id});
}

@Override
public Map getInfoStudentById(int id) {
    return dao.getInfoStudentById(id);
}

String id = (String) request.getSession().getAttribute("id");
//接收数据信息 我要获得 年龄 姓名  电话 地址
//获得id里面的数据信息内容
Map infoStudentById = service.getInfoStudentById(Integer.parseInt(id));

Map infoStudentById = service.getInfoStudentById(Integer.parseInt(id));

Map infoStudentById = service.getInfoStudentById(Integer.parseInt(id));
//我要获得 年龄 姓名  电话 地址
List age = service.getAge();
List name = service.getName();
List phone = service.getPhone();
List address = service.getAddress();

Map map = new HashMap<>();
map.put("infoStudentById", infoStudentById);
map.put("age", age);
map.put("name", name);
map.put("phone", phone);
map.put("address", address);
new ObjectMapper().writeValue(response.getWriter(), map);

{infoStudentById: {id: 6, name: "张三六", sex: "男", age: 34, phone: 189997634, address: "江西南昌"},…}
address: ["上海", "南昌", "小明", "江西九江", "江西南昌", "江西省九江市"]
age: ["20", "21", "23", "30", "31", "32", "34", "56", "69"]
infoStudentById: {id: 6, name: "张三六", sex: "男", age: 34, phone: 189997634, address: "江西南昌"}
name: ["人生", "张三丰", "张三五", "张三六", "张三四", "张飞", "想你了", "我在干嘛1", "我是增加的数据", "李死角", "湖自尽", "王五", "王小二", "王小明",…]
phone: ["187987634", "189345578", "189494534", "189494634", "189675478", "189994634", "189997634",…]
0: "187987634"
1: "189345578"
2: "189494534"
3: "189494634"
4: "189675478"
5: "189994634"
6: "189997634"
7: "1678976456"
8: "1908976556"
9: "1916789675"
10: "1987865452"

@Override
public int add(Map map) {
    return DBUtil.jt.update("insert into student values(?,?,?,?,?,?)",
            new Object[]{0, map.get("name"),
                    map.get("sex"), map.get("age"),
                    map.get("phone"), map.get("address")});
}

@Override
public int updateStudent(Map map, int id) {
    Map m = new HashMap<>();
    //使用map集合迭代将两部分的数据合并起来
    for (Map.Entry entry : map.entrySet()) {
        m.put(entry.getKey(), entry.getValue()[0]);
    }
    m.put("id",id);

    return dao.updateStudent(m);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");
    response.setCharacterEncoding("UTF-8");
    request.setCharacterEncoding("UTF-8");}

int student = service.updateStudent(parameterMap, Integer.parseInt(id));
if(student>0){
    System.out.println("恭喜用户修改信息已完成");
    response.sendRedirect("workList1.html");
}