[追加] ボタンをクリックすると、製品名が空かどうかが判断され、空の場合は追加できず、プロンプト: 製品名を空にすることはできません

追加サーブレット：

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: プロンプト関数は add.jsp (キー) で記述されます。

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

キーポイント：

1. 製品名: <input type="text" name="name" id= "name" ><br>にid="name"を書くのを忘れないでください。次の var name= $("#name " ) .val(); $("#name")が対応し、その機能は name の値を取得することです。書かれていないと、追加ボタンをクリックしても追加されず、表示ページに戻りません。

2. <input type=" button " value="add" id="but">のボタンをsubmit と記述しないでください。submit をクリックするとトランザクションは送信されますが、button ではトランザクションは送信されません。送信は $("#addForm").submit(); によって実装されます。

3. <div style="color: red" id="div"></div><br> は、プロンプトステートメントの場所を提供します。

[追加] ボタンをクリックすると、製品名が空かどうかが判断され、空の場合は追加できず、プロンプト: 製品名を空にすることはできません

おすすめ