Cuando se hace clic en el botón Agregar, se juzga si el nombre del producto está vacío, si está vacío, no se puede agregar y aparece un mensaje: El nombre del producto no puede estar vacío

AñadirServlet:

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: la función de solicitud está escrita en add.jsp (clave)

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

punto clave:

1. Nombre del producto: no olvide escribir id="nombre" en <input type="text" name="name" id= "name" ><br> , porque la siguiente var name= $("#name " ) .val(); $("#nombre") le corresponde, y su función es obtener el valor de nombre. Si no está escrito, cuando se hace clic en el botón Agregar, no se agregará y no volverá a la página de visualización.

2. No escriba el botón en <input type=" button " value="add" id="but"> como envío, porque al hacer clic en enviar se enviará la transacción, pero el botón no enviará la transacción. El envío se implementa mediante $("#addForm").submit();.

3. <div style="color: red" id="div"></div><br> proporciona una ubicación para la instrucción de solicitud.

Cuando se hace clic en el botón Agregar, se juzga si el nombre del producto está vacío, si está vacío, no se puede agregar y aparece un mensaje: El nombre del producto no puede estar vacío

Supongo que te gusta