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前后端交互内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
这篇文章主要介绍了单元测试 @mock与@SpringBootTest的使用方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-10-10
这篇文章主要介绍了Java 微服务架构的相关资料，帮助大家更好的理解和使用Java，感兴趣的朋友可以了解下2021-02-02
下面小编就为大家带来一篇JAVA 反射 动态调用不同类的静态方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-08-08
这篇文章主要为大家介绍了Spring Boot优化后启动速度快到飞起的技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
本文主要介绍了MyBatis实现简单的数据表分月存储，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-03-03
这篇文章主要为大家详细介绍了Java实现三子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-07-07
在操作数据库时，经常会碰到批量插入、批量删除的情况，直接执行SQL语句还好做一点，当使用Mybatis进行批量插入、批量删除时会有一些问题。下面对使用Mybatis批量插入，批量删除进行介绍2016-12-12
这篇文章主要介绍了使用spring框架实现数据库事务处理方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-10-10
基于mybatis-plus timestamp返回为null问题的排除
这篇文章主要介绍了mybatis-plus timestamp返回为null问题的排除，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2021-08-08
这篇文章主要介绍了2020Mac M1安装jdk和IDEA的详细方法,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-03-03
最新评论