JSP实现简单界面和前后端交互

maven

<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
  <modelVersion>4.0.0</modelVersion>

  <groupId>org.example</groupId>
  <artifactId>practice1109</artifactId>
  <version>1.0-SNAPSHOT</version>
  <packaging>war</packaging>

  <name>practice1109 Maven Webapp</name>
  <!-- FIXME change it to the project's website -->
  <url>http://www.example.com</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>8</maven.compiler.source>
        <maven.compiler.target>8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
            <scope>provided</scope>
        </dependency>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>4.11</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>jsp-api</artifactId>
            <version>2.2</version>
            <scope>provided</scope>
        </dependency>
    </dependencies>

    <build>
        <finalName>jsptest</finalName>

        <pluginManagement><!-- lock down plugins versions to avoid using Maven defaults (may be moved to parent pom) -->
            <plugins>
                <plugin>
                    <artifactId>maven-clean-plugin</artifactId>
                    <version>3.1.0</version>
                </plugin>
                <!-- see http://maven.apache.org/ref/current/maven-core/default-bindings.html#Plugin_bindings_for_war_packaging -->
                <plugin>
                    <artifactId>maven-resources-plugin</artifactId>
                    <version>3.0.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-compiler-plugin</artifactId>
                    <version>3.8.0</version>
                </plugin>
                <plugin>
                    <artifactId>maven-surefire-plugin</artifactId>
                    <version>2.22.1</version>
                </plugin>
                <plugin>
                    <artifactId>maven-war-plugin</artifactId>
                    <version>3.2.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-install-plugin</artifactId>
                    <version>2.5.2</version>
                </plugin>
                <plugin>
                    <artifactId>maven-deploy-plugin</artifactId>
                    <version>2.8.2</version>
                </plugin>
            </plugins>
        </pluginManagement>
    </build>
</project>

pojo

order

package com.test.pojo;

public class Order {
 public String index;
 public String address;
 public String mail;
 public String receiver;
 public String need;
 public String describe;

 public String getIndex() {
  return index;
 }

 public void setIndex(String index) {
  this.index = index;
 }

 public String getAddress() {
  return address;
 }

 public void setAddress(String address) {
  this.address = address;
 }

 public String getMail() {
  return mail;
 }

 public void setMail(String mail) {
  this.mail = mail;
 }

 public String getReceiver() {
  return receiver;
 }

 public void setReceiver(String receiver) {
  this.receiver = receiver;
 }

 public String getNeed() {
  return need;
 }

 public void setNeed(String need) {
  this.need = need;
 }

 public String getDescribe() {
  return describe;
 }

 public void setDescribe(String describe) {
  this.describe = describe;
 }

 public Order(String index, String address, String mail, String receiver, String need,
        String describe) {
  this.index = index;
  this.address = address;
  this.mail = mail;
  this.receiver = receiver;
  this.need = need;
  this.describe = describe;
 }
}

ordermgr

package com.test.pojo;

import java.util.ArrayList;
import java.util.List;

public class OrderMgr {
 List<Order> orders = new ArrayList<>();

 public OrderMgr() {
  orders.add(new Order("1", "湖南省，长沙市，岳麓区麓山南路", "410082", "边耐政", "是", "啥东西也不是"));
 }

 public List<Order> getOrders() {
  return orders;
 }

 public void setOrders(List<Order> orders) {
  this.orders = orders;
 }
}

AddServlet

package com.test.web;

import com.test.pojo.Order;
import com.test.pojo.OrderMgr;

import javax.servlet.*;
import javax.servlet.http.*;
import javax.servlet.annotation.*;
import java.io.IOException;
import java.util.List;

@WebServlet(name = "AddServlet", value = "/AddServlet")
public class AddServlet extends HttpServlet {
 OrderMgr orderMgr = new OrderMgr();
 @Override
 protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  List<Order> orders = orderMgr.getOrders();
  request.setAttribute("orders",orders);
  request.getRequestDispatcher("orderList.jsp").forward(request,response);
 }

 @Override
 protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
  request.setCharacterEncoding("utf-8");
  String index = request.getParameter("index");
  String address = request.getParameter("address");
  String mail = request.getParameter("mail");
  String receiver = request.getParameter("receiver");
  String need = request.getParameter("need");
  String describe = request.getParameter("describe");
  orderMgr.getOrders().add(new Order(index,address,mail,receiver,need,describe));
  doGet(request,response);
 }
}

web.xml

<!DOCTYPE web-app PUBLIC
 "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
 "http://java.sun.com/dtd/web-app_2_3.dtd" >

<web-app>
    <servlet>
        <!-- 类名 -->
        <servlet-name>AddServlet</servlet-name>
        <!-- 所在的包 -->
        <servlet-class>com.test.web.AddServlet</servlet-class>
    </servlet>
    <servlet-mapping>
        <servlet-name>AddServlet</servlet-name>
        <!-- 访问的网址 -->
        <url-pattern>/AddServlet</url-pattern>
    </servlet-mapping>
    <welcome-file-list>
        <welcome-file>AddServlet</welcome-file> <!--直接改为servlet路径-->
    </welcome-file-list>
</web-app>

orderlist

<%@ page import="java.util.List" %>
<%@ page import="com.test.pojo.Order" %><%--
  Created by IntelliJ IDEA.
  User: 19318
  Date: 2022/11/9
  Time: 23:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<a href="addOrder.jsp">添加订单</a>
<%
    List<Order> orders = (List<Order>) request.getAttribute("orders");
%>
<div>
    <div>订单列表</div>
    <table border="1" cellspacing="0" width="800">
        <tr>
            <td>index</td>
            <td>邮寄地址</td>
            <td>邮编</td>
            <td>收件人</td>
            <td>是否需要发票</td>
            <td>产品描述</td>
        </tr>
        <%
        for (int i = 0;i<orders.size();i++){
        %>
        <tr>
            <td><%=orders.get(i).getIndex()%></td>
            <td><%=orders.get(i).getAddress()%></td>
            <td><%=orders.get(i).getMail()%></td>
            <td><%=orders.get(i).getReceiver()%></td>
            <td><%=orders.get(i).getNeed()%></td>
            <td><%=orders.get(i).getDescribe()%></td>
        </tr>
        <%
            }
        %>
    </table>
</div>

</body>
</html>

addorder

<%--
  Created by IntelliJ IDEA.
  User: 19318
  Date: 2022/11/9
  Time: 23:26
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="AddServlet" method="post">
    <label>index:</label>
    <input type="text" name="index">
    <br>
    <label>邮寄地址:</label>
    <input type="text" name="address">
    <br>
    <label>邮编:</label>
    <input type="text" name="mail">
    <br>
    <label>收件人:</label>
    <input type="text" name="receiver">
    <br>
    <label>是否需要发票:</label>
    <input type="text" name="need">
    <br>
    <label>产品描述:</label>
    <input type="text" name="describe">
    <br>
    <button type="submit" onclick="toList()">
        提交
    </button>
</form>
</body>

<script>
    function toList(){
        window.location.href = "orderList.jsp"
    }
</script>
</html>