JavaWeb进阶案例-实现AJAX+Sevlet前后端分离开发

继续分享JavaWeb课程实验内容。

任务点2：用户确认收货（10分）
在管理员将订单发货后，在管理员看来，该订单状态是“已发货”。操作上原先还有个“完成”按钮，我已去掉。购买用户登录后，查询订单，订单状态同样是“已发货”，但是再没有后续操作。

现在要求：加上一个“确认收货”按钮，用户点击该按钮，向后端提出AJAX请求，将order表的status字段（1未付款/2已付款/3已发货（配送中）/4已完成）改为4，此时前端界面上订单状态变为“已完成”。当管理员登录查询订单时，此订单状态应该也为“已完成”。换句话说，将订单的“完成（确认收货）”操作从管理员移到用户。
提示：
原系统参考实现：
前端：order_list.jsp的其中一行：发货
后端：AdminOrderStatusServlet.java

新的要完成的实现：
前端：order_list.html（进入方式：普通用户登录后点击导航栏上的“我的订单”。我已调整好，只待增加“确认收货”按钮并实现点击后的功能。）
后端：自写Servlet处理前端点击“确认收货”后发来的AJAX请求，采用前后端分离开发方式

前端需要修改的代码：

首先增加“确认收货”数据列。

在

在js中发起的$.get('/orderList', function (orderList)请求里面，增加渲染的列表项：

ps.此处通过一个三目运算符进行判定，若当前订单状态为4（已完成时），则此功能按钮设置为“disabled”，将按钮禁用，点击此按钮不会触发函数。若当前订单状态不为4，则为下列功能函数。

onclick="myFunction(${order.id})

当点击收获按钮时，会触发绑定的功能函数，实现对订单状态的改变。οnclick="myFunction(${order.id}) 通过传递订单编号order.id这个参数，实现对此订单的状态改变。具体实现代码为：

function myFunction(orderId) {
	   $.ajax({
		   url: "/edit_order_status",
		   type: "get",
		   data: {
			   "orderId": orderId
		   },
	   });
   }

后端实现代码：

处理/edit_order_status请求，无需返回任何数据。（项目采用mvc三层架构实现后端）

servlet层代码：

@WebServlet("/edit_order_status")
public class UserEditorderstatus extends HttpServlet {
    private OrderService oService = new OrderService();
 
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        int id = Integer.parseInt(request.getParameter("orderId"));
        int status =4;
        // 更新订单状态
        oService.updateStatus(id, status);
    }
}

Service层代码：

public void updateStatus(int id, int status) {
      try {
         oDao.updateStatus(id, status);
      } catch (SQLException e) {
   
         e.printStackTrace();
      }
   }

dao层代码：

public void updateStatus(int id, int status) throws SQLException {
      QueryRunner r = new QueryRunner(DataSourceUtils.getDataSource());
      String sql = "update `order` set status=? where id = ?";
      r.update(sql, status, id);
   }

如有问题，欢迎评论区留言讨论！