关于Ajax的全局刷新bmi的项目实战

炎月寒韵

已于 2022-10-24 23:38:40 修改

阅读量282

点赞数 1

分类专栏：前端知识文章标签： ajax 1024程序员节

于 2022-10-24 23:36:57 首次发布

本文链接：https://blog.csdn.net/weixin_62120659/article/details/127450338

版权

前端知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

此文仅记录本人在学习过程中所遇问题及如何解决问题

一、idea如何创建web项目

新版本更新后请查看官方文档：
https://www.jetbrains.com/help/idea/2022.2/creating-and-running-your-first-java-ee-application.html

二、题目

三、详细过程

1、创建项目

下一步之后，不用在添加任何依赖，直接创建即可

创建完后应该显示的页面如下：

2、编写初始页面index.jsp代码

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>全局刷新</title>
</head>
<body>
<p>全局刷新计算bmi</p>
<form action="" method="get">
    姓名：<input type="text" name="name"><br>
    体重（公斤）：<input type="text" name="w"><br>
    身高（米）：<input type="text" name="h"><br>
    <input type="submit" name="提交">
</form>
</body>
</html>

3、在Java文件夹中创建Servlet

具体步骤如下：先点击那个蓝色Java文件夹，然后再键盘上alt+INS创建Servlet，输入以下：

点击确定后可得

创建之后我们就去WEB-INE中web.xml中完成servlet，让你所创作的页面与BmiServlet连接起来

4、WEB-INE中web.xml的完成

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="https://jakarta.ee/xml/ns/jakartaee"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="https://jakarta.ee/xml/ns/jakartaee https://jakarta.ee/xml/ns/jakartaee/web-app_5_0.xsd"
         version="5.0">
    <servlet>
        <servlet-name>BmiServlet</servlet-name><!--//定义Servlet的名称，一般跟Servlet类名有关，该名称在整个应用中必须是唯一的-->
        <servlet-class>com.dabai.controller.BmiServlet</servlet-class><!--//指向我们要注册的Servlet 的类地址, 要有包路径-->
    </servlet>
    <servlet-mapping> <!-- 是用来配置我们注册的组件的访问路径,里面包括两个节点，<servlet-name> 、<url-pattern>-->
        <servlet-name>BmiServlet</servlet-name><!--要与前面<servlet>元素中声明的名字一致-->
        <url-pattern>/bmiServlet</url-pattern><!--指定相对于Servlet的URL的路径。该路径相对于web应用程序上下文的根路径。<servlet-mapping>将URL模式映射到某个Servlet，即该Servlet处理的URL。-->
    </servlet-mapping>
</web-app>

哪个使用了bmiServlet就可以和Bmiservlet连接起来，所以我们回到index.jsp页面，把bmiServlet填进action里面。如图：

5、完成BmiServlet

package com.dabai.controller;

import jakarta.servlet.*;
import jakarta.servlet.http.*;
import jakarta.servlet.annotation.*;

import java.io.IOException;

@WebServlet(name = "BmiServlet", value = "/BmiServlet")
public class BmiServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //接受数据
        String strName=request.getParameter("name");
        String height=request.getParameter("h");
        String weight=request.getParameter("w");
        //计算bmi：bmi=体重/身高的平方
        float h=Float.valueOf(height);
        float w=Float.valueOf(weight);
        float bmi=w/(h*h);
        //判断bmi范围
        String msg="";
        if (bmi<=18.5){
            msg="您偏瘦";
        }else if (bmi>18.5&&bmi<=23.9){
            msg="您体重正常";
        } else if (bmi>23.9 &&bmi<=27) {
            msg="您体重偏胖";
        }else {
            msg="您就是一个胖子";
        }
        System.out.println("msg="+msg);
        msg="您好"+strName+"先生/女士"+"您的bmi值为"+bmi+","+msg;
        //把数据存入request
        request.setAttribute("msg",msg);
        //转发新的页面
        request.getRequestDispatcher("/result.jsp").forward(request,response);//result.jsp是新页面，待会完善
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }
}

6、创建result.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>结果页面</title>
</head>
<body>
  <p>显示bmi计算结果</p>
  <h3>${msg}</h3>
</body>
</html>

7、启动tomcat（没有的需要下载）

1）点击“当前文件”

2）添加配置->添加新的运行配置->划到下面的tomcat里本地

3）url和下面的http端口改为9090，因为本机的8080端口可能已经被占用了

8、运行

点击下图右侧按钮即可在浏览器中运行

9、成功运行示例

点击提交，进行跳转后得到

10、解决问题

整个过程中如若点击提交后报错，可能是pom.xml文件有问题

可以将pom.xml中代码换为以下

<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/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <groupId>org.example</groupId>
    <artifactId>untitled20</artifactId>
    <packaging>war</packaging>
    <version>1.0-SNAPSHOT</version>
    <name>untitled20 Maven Webapp</name>
    <url>http://maven.apache.org</url>
    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.target>1.8</maven.compiler.target>
        <maven.compiler.source>1.8</maven.compiler.source>
        <junit.version>5.8.2</junit.version>
    </properties>

    <dependencies>
        <dependency>
            <groupId>junit</groupId>
            <artifactId>junit</artifactId>
            <version>3.8.1</version>
            <scope>test</scope>
        </dependency>
        <dependency>
            <groupId>javax.servlet</groupId>
            <artifactId>javax.servlet-api</artifactId>
            <version>3.1.0</version>
        </dependency>
        <!-- https://mvnrepository.com/artifact/javax.servlet.jsp/javax.servlet.jsp-api -->
        <dependency>
            <groupId>javax.servlet.jsp</groupId>
            <artifactId>javax.servlet.jsp-api</artifactId>
            <version>2.3.3</version>
        </dependency>

    </dependencies>
    <build>
        <finalName>untitled20</finalName>
    </build>
</project>

之后点击右侧Maven，点击本土左上角那个回收箭头刷新

此时回到BmiServlet文件处

若碰上这些包变红色，可先将全部的import删除，再将鼠标移至红色字上面，点击alt+enter（一次即可）导入包，之后字体便会恢复成原来的颜色。之后再运行即可成功跳转页面。

炎月寒韵

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于Ajax的全局刷新bmi的项目实战

哪个使用了bmiServlet就可以和Bmiservlet连接起来，所以我们回到index.jsp页面，把bmiServlet填进action里面。创建之后我们就去WEB-INE中web.xml中完成servlet，让你所创作的页面与BmiServlet连接起来。3）url和下面的http端口改为9090，因为本机的8080端口可能已经被占用了。2）添加配置->添加新的运行配置->划到下面的tomcat里本地。下一步之后，不用在添加任何依赖，直接创建即可。6、启动tomcat（没有的需要下载）
复制链接

扫一扫