When the Add button is clicked, it is judged whether the product name is empty, if it is empty, it cannot be added, and a prompt: The product name cannot be empty

AddServlet：

package com.hsd.controller;

import com.hsd.entity.Commodity;
import com.hsd.service.CommodityService;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
import java.io.IOException;
import java.util.List;

@WebServlet("/AddServlet")
public class AddServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //获取commodityService
        CommodityService commodityService = new CommodityService();
        //获取页面添加的数据
        String id=req.getParameter("id");
        String name=req.getParameter("name");
        String summary=req.getParameter("summary");
        String num=req.getParameter("num");
        String state=req.getParameter("state");
        //将获取到的数据封装到对应的实体类中
        Commodity commodity=new Commodity();
        commodity.setId(Integer.parseInt(id));
        commodity.setName(name);
        commodity.setSummary(summary);
        commodity.setNum(Integer.parseInt(num));
        commodity.setState(state);
        //调用service的添加方法
        commodityService.addServlet(commodity);
         //转发到首页(路径不能写commodity.jsp，否则只显示表头，无数据)
        req.getRequestDispatcher("CommodityServlet").forward(req, resp);
    }
}

add.jsp: The prompt function is written in add.jsp (key)

<%--
  Created by IntelliJ IDEA.
  User: 30868
  Date: 2022/11/4
  Time: 8:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<html>
<head>
    <title>添加页面</title>
</head>
<body>
<center>
    <form action="AddServlet" method="get" id="addForm">
        编号:<input type="text" name="id"><br>
        商品名:<input type="text" name="name" id="name"><br>
        商品描述:<input type="text" name="summary"><br>
        商品数量:<input type="text" name="num"><br>
        是否有货:<input type="text" name="state"><br>
        <div style="color: red" id="div"></div><br>
        <input type="reset" value="重置">
        <input type="button" value="添加" id="but">
    </form>
</center>
</body>
<%--加载jquery-3.4.1.js插件--%>
<script src="js/jquery-3.4.1.js"></script>
<script type="text/javascript">
   $("#but").click(function () {
       var name=$("#name").val();
       function isEmpty(str) {
           if(str==null||str.trim()==""){
               return true;
           }
           return false;
       }
       if(isEmpty(name)){
           $("#div").html("商品名不能为空！")
           return;
       }
       //给表单绑定点击事件,提交表单
       $("#addForm").submit();
   });
</script>
</html>

key point:

1. Product name: Don’t forget to write id="name" in <input type="text" name="name" id= "name" ><br> , because the following var name= $("#name" ) .val(); $("#name") corresponds to it, and its function is to obtain the value of name. If it is not written, when the add button is clicked, it will not be added, and it will not return to the display page.

2. Do not write the button in <input type=" button " value="add" id="but"> as submit, because clicking submit will submit the transaction, but button will not submit the transaction. The submission is implemented by $("#addForm").submit();.

3. <div style="color: red" id="div"></div><br> provides a location for the prompt statement.

When the Add button is clicked, it is judged whether the product name is empty, if it is empty, it cannot be added, and a prompt: The product name cannot be empty

Guess you like