快捷導(dǎo)航

Java Web項(xiàng)目創(chuàng)建并實(shí)現(xiàn)前后端交互

更新時(shí)間：2023年07月17日 09:05:25 作者：蘇禾呀

本文主要介紹了Java Web項(xiàng)目創(chuàng)建并實(shí)現(xiàn)前后端交互，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧

一：使用工具

Eclipse

版本如下：

注：不同版本的eclipse創(chuàng)建的項(xiàng)目基礎(chǔ)目錄可能會(huì)有所不同。

二：創(chuàng)建Java Web項(xiàng)目

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

2. 輸入項(xiàng)目名稱(chēng) --> 配置Tomcat --> Next --> Next -->勾選Generate Web.xml deployment descriptor --> Finish

到這里一個(gè)基礎(chǔ)的JavaWeb項(xiàng)目就已經(jīng)創(chuàng)建好啦。

創(chuàng)建完成后是這樣的：

接下來(lái)就需要我們?nèi)ヌ畛渌鼇?lái)實(shí)現(xiàn)一些基本的功能。

三：編寫(xiě)代碼

1.用HTML編寫(xiě)一個(gè)簡(jiǎn)單的前端界面

首先在WebContent目錄下新建一個(gè)html文件（注意是在WebContent目錄下，而不是在META-INF或WEB-INF目錄下）。

創(chuàng)建好之后是這樣的：

先寫(xiě)一個(gè)最簡(jiǎn)單的登錄界面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
</head>
<body>
    賬號(hào)：<input type="text"><br><br>
	密碼：<input type="text"><br><br>
	<input type="button" value="登錄">
</body>
</html>

之后我們還需要在web.xml中<welcome-file-list>的下面新增一行代碼來(lái)讓瀏覽器讀取這個(gè)html文件。

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

然后我們來(lái)測(cè)試一下。

測(cè)試方法：

項(xiàng)目總文件右鍵 --> Run As --> Run On server

現(xiàn)在就出來(lái)了下面的樣子。

為了測(cè)試方便，我們可以修改頁(yè)面顯示的地方。

這里可以隨意修改，可以使用1 系統(tǒng)瀏覽器，也可以選擇3 Chrome。

修改之后一定要記得重新啟動(dòng)Eclipse。

2.用Java編寫(xiě)后端

同上，我們還是得建一個(gè)Servlet文件，先在Java Resources里的src包里新建一個(gè)包，然后在包里再新建Servlet文件。

先建包是為了給后端的代碼分類(lèi)，方便后期管理。

3.前后端實(shí)現(xiàn)交互

前端代碼：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登錄</title>
<script src="/JavaWeb/resource/js/jquery.js"></script>
<script>
	$(function(){
		$(".btn").on("click",function(){
			//獲取賬號(hào)密碼
			var username = $(".username").val()
			var password = $(".password").val()
			//發(fā)起請(qǐng)求
			$.ajax({
				url:"/JavaWeb/LoginServlet",  //請(qǐng)求地址
				type:"get",  //請(qǐng)求方式
				data:{   //發(fā)送數(shù)據(jù)
					username:username,
					password:password
				},
				success:function(data){  //請(qǐng)求成功的回調(diào)函數(shù)
					alert(data.username + "的密碼為" + data.password)
				},
				error:function(data){  //請(qǐng)求失敗的回調(diào)函數(shù)
					alert("錯(cuò)誤了！")
				}
			})
		})
	})
</script>
</head>
<body>
	賬號(hào)：<input type="text" class="username" ><br><br>
	密碼：<input type="text" class="password"><br><br>
	<input type="button" value="登錄" class="btn">
</body>
</html>

在寫(xiě)前端代碼的時(shí)候我們用到了jQuery，所以我們需要把它加進(jìn)來(lái)，放在這里。

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") //引號(hào)內(nèi)的為前端引用時(shí)的名稱(chēng)，可任意修改
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 {
		//設(shè)置前端傳過(guò)來(lái)的數(shù)據(jù)字符編碼
		request.setCharacterEncoding("utf-8");
		//設(shè)置后端傳給前端響應(yīng)數(shù)據(jù)的字符編碼
		response.setCharacterEncoding("utf-8");
		response.setContentType("text/json;charset=utf-8");
		//接收前端傳過(guò)來(lái)的數(shù)據(jù)
		String username = request.getParameter("username");
		String password = request.getParameter("password");
		System.out.println("前端傳過(guò)來(lái)的賬號(hào)："+username);
		System.out.println("前端傳過(guò)來(lái)的密碼："+password);
		//后端給前端相應(yīng)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);
	}
}

這樣的話一個(gè)簡(jiǎn)單的Java Web項(xiàng)目就建好啦。

到此這篇關(guān)于Java Web項(xiàng)目創(chuàng)建并實(shí)現(xiàn)前后端交互的文章就介紹到這了,更多相關(guān)Java Web前后端交互內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: