Java Web项目创建并实现前后端交互

更新时间：2023年07月17日 09:05:25 作者：苏禾呀

本文主要介绍了Java Web项目创建并实现前后端交互，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

一：使用工具

Eclipse

版本如下：

注：不同版本的eclipse创建的项目基础目录可能会有所不同。

二：创建Java Web项目

1. File --> New --> Dynamic Web Project

2. 输入项目名称 --> 配置Tomcat --> Next --> Next -->勾选Generate Web.xml deployment descriptor --> Finish

到这里一个基础的JavaWeb项目就已经创建好啦。

创建完成后是这样的：

接下来就需要我们去填充它来实现一些基本的功能。

三：编写代码

1.用HTML编写一个简单的前端界面

首先在WebContent目录下新建一个html文件（注意是在WebContent目录下，而不是在META-INF或WEB-INF目录下）。

创建好之后是这样的：

先写一个最简单的登录界面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
</head>
<body>
    账号：<input type="text"><br><br>
	密码：<input type="text"><br><br>
	<input type="button" value="登录">
</body>
</html>

之后我们还需要在web.xml中<welcome-file-list>的下面新增一行代码来让浏览器读取这个html文件。

<welcome-file>login.html</welcome-file>

然后我们来测试一下。

测试方法：

项目总文件右键 --> Run As --> Run On server

现在就出来了下面的样子。

为了测试方便，我们可以修改页面显示的地方。

这里可以随意修改，可以使用1 系统浏览器，也可以选择3 Chrome。

修改之后一定要记得重新启动Eclipse。

2.用Java编写后端

同上，我们还是得建一个Servlet文件，先在Java Resources里的src包里新建一个包，然后在包里再新建Servlet文件。

先建包是为了给后端的代码分类，方便后期管理。

3.前后端实现交互

前端代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录</title>
<script src="/JavaWeb/resource/js/jquery.js"></script>
<script>
	$(function(){
		$(".btn").on("click",function(){
			//获取账号密码
			var username = $(".username").val()
			var password = $(".password").val()
			//发起请求
			$.ajax({
				url:"/JavaWeb/LoginServlet",  //请求地址
				type:"get",  //请求方式
				data:{   //发送数据
					username:username,
					password:password
				},
				success:function(data){  //请求成功的回调函数
					alert(data.username + "的密码为" + data.password)
				},
				error:function(data){  //请求失败的回调函数
					alert("错误了！")
				}
			})
		})
	})
</script>
</head>
<body>
	账号：<input type="text" class="username" ><br><br>
	密码：<input type="text" class="password"><br><br>
	<input type="button" value="登录" class="btn">
</body>
</html>

在写前端代码的时候我们用到了jQuery，所以我们需要把它加进来，放在这里。

js源码可自行百度。

后端代码：

package com.Mango;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet") //引号内的为前端引用时的名称，可任意修改
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;
    /**
     * Default constructor. 
     */
    public LoginServlet() {
        // TODO Auto-generated constructor stub
    }
	/**
	 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//设置前端传过来的数据字符编码
		request.setCharacterEncoding("utf-8");
		//设置后端传给前端响应数据的字符编码
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		//接收前端传过来的数据
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("前端传过来的账号："+username);
		System.out.println("前端传过来的密码："+password);
		//后端给前端相应json字符串
		String json = "{\"username\":\"" + username + "\",\"password\":\"" + password + "\"}";
		response.getWriter().write(json);
	}
	/**
	 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
	 */
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

这样的话一个简单的Java Web项目就建好啦。

到此这篇关于Java Web项目创建并实现前后端交互的文章就介绍到这了,更多相关Java Web前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解Java中对象序列化与反序列化
这篇文章主要为大家详细介绍了Java中对象序列化与反序列化，感兴趣的小伙伴们可以参考一下
2016-02-02
第三方网站微信登录java代码实现
这篇文章主要为大家详细介绍了第三方网站微信登录的java代码实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-04-04
Java并发利器CountDownLatch深度解析与实战应用小结
CountDownLatch就像一个倒计时器,当所有任务完成后,主线程才继续执行,本文将通过简单易懂的方式,带你掌握这个强大的并发工具,需要的朋友可以参考下
2025-06-06
基于SpringBoot实现一个简易加法计算器
本文详细介绍了如何使用SpringBoot实现一个简易的加法计算器,主要内容包括项目准备工作、项目设计、服务器代码编写以及项目运行,通过这个项目,读者可以学习到SpringBoot控制器编写、请求映射配置等核心技能,需要的朋友可以参考下
2026-01-01
SpringBoot如何获取图片的宽高
本文介绍了Java中获取图片宽高尺寸的三种方法：使用BufferedImage、Image类和更底层的字节流方式,BufferedImage和Image类适用于大多数情况,而字节流方式则适用于特定格式的高性能场景,感兴趣的朋友跟随小编一起看看吧
2025-11-11
Java Scanner用法案例详解
这篇文章主要介绍了Java Scanner用法案例详解,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下
2021-08-08
简单易懂Java反射的setAccessible()方法
本文主要介绍了简单易懂Java反射的setAccessible()方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-07-07
Java设计模式之责任链模式
今天小编就为大家分享一篇关于Java设计模式之责任链模式，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
SpringBoot结合Tess4J实现拍图识字的示例代码
图片中的文字提取已经越来越多地应用于数据输入和自动化处理过程,本文主要介绍了SpringBoot结合Tess4J实现拍图识字的示例代码,具有一定的参考价值,感兴趣的可以了解一下
2024-06-06
学习java一定要知道的垃圾收集器
这篇文章主要介绍了学习java一定要知道的垃圾收集器，垃圾收集器的发展路线，简单来说是随着内存越来越大而发生变化，更多相关介绍需要的朋友可以参考一下
2022-07-07