Eclipse创建Maven WebApp项目JSP AJAX调用SERVLET

╰半橙微兮° 2023-09-30 08:48 11阅读 0赞

#### **创建 Maven 项目** ####

在 Eclipse 上，创建一个**Maven**项目

![93e293ef316e0b77c8bd2d8a75011298.png][]

单击**下一步**按钮以选择项目的**工作区位置**

![f5b0dfb35047212bb08bcb6f6ec4fa20.png][]

单击**下一步**按钮为项目选择**Archetype**

![6b0176798f4ad6a0c9f3d4074fa6edfd.png][]

单击**下一步**按钮并输入**项目信息**：

*  **组 ID**：LearnJSPServletWithRealApps
 *  **工件 ID**：LearnJSPServletWithRealApps
 *  **包**：com.demo

![e249a1f0b309b273ba2a6519fae00911.png][]

点击**Finish**按钮完成创建 Maven 项目

#### **配置 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>LearnJSPServletWithRealApps</groupId>
    	<artifactId>LearnJSPServletWithRealApps</artifactId>
    	<packaging>war</packaging>
    	<version>0.0.1-SNAPSHOT</version>
    	<name>Learn JSP-Servlet with Real Apps</name>
    	<url>http://maven.apache.org</url>
    	<dependencies>
    		<dependency>
    			<groupId>junit</groupId>
    			<artifactId>junit</artifactId>
    			<version>3.8.1</version>
    			<scope>test</scope>
    		</dependency>
    		<dependency>
    			<groupId>javax.servlet.jsp.jstl</groupId>
    			<artifactId>javax.servlet.jsp.jstl-api</artifactId>
    			<version>1.2.1</version>
    		</dependency>
    		<dependency>
    			<groupId>taglibs</groupId>
    			<artifactId>standard</artifactId>
    			<version>1.1.2</version>
    		</dependency>
    		<dependency>
    			<groupId>javax.servlet</groupId>
    			<artifactId>javax.servlet-api</artifactId>
    			<version>3.1.0</version>
    			<scope>provided</scope>
    		</dependency>
    	</dependencies>
    	<build>
    		<finalName>LearnJSPServletWithRealApps</finalName>
    	</build>
    </project>

#### **配置 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>
    	<welcome-file-list>
    		<welcome-file>index.jsp</welcome-file>
    	</welcome-file-list>
    </web-app>

#### **重定向页面** ####

在**src\\main\\webapp**文件夹中创建名为**index.jsp**的新 JSP 文件。

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    	pageEncoding="ISO-8859-1" isELIgnored="false"%>
    <jsp:forward page="demo"></jsp:forward>

#### **创建 Servlet** ####

创建**src\\main\\java**文件夹。刷新项目，可以看到**Java Resources**下出现**src\\main\\java**

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16][]

在**src\\main\\java**文件夹中创建名为**com.demo.servlets**的新包。在这个包中，创建新的**Servlet**，如下所示：

**演示 Servlet**

在**com.demo.servlets**包中，创建名为**DemoServlet的新****Servlet**，如下所示：

package com.demo.servlets;
    
    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;
    
    @WebServlet("/demo")
    public class DemoServlet extends HttpServlet {
    
    	private static final long serialVersionUID = 1L;
    
    	public DemoServlet() {
    		super();
    	}
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		request.getRequestDispatcher("demo/index.jsp").forward(request, response);
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    	}
    
    }

**Ajax Servlet**

在**com.demo.servlets**包中，创建一个名为**AjaxServlet的新****Servlet**，如下所示：

package com.demo.servlets;
    
    import java.io.IOException;
    import java.io.PrintWriter;
    
    import javax.servlet.ServletException;
    import javax.servlet.annotation.WebServlet;
    import javax.servlet.http.HttpServlet;
    import javax.servlet.http.HttpServletRequest;
    import javax.servlet.http.HttpServletResponse;
    
    @WebServlet("/ajax")
    public class AjaxServlet extends HttpServlet {
    
    	private static final long serialVersionUID = 1L;
    
    	public AjaxServlet() {
    		super();
    	}
    
    	protected void doGet(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    		PrintWriter out = response.getWriter();
    		out.print("Hello Ajax");
    		out.flush();
    		out.close();
    	}
    
    	protected void doPost(HttpServletRequest request, HttpServletResponse response)
    			throws ServletException, IOException {
    	}
    
    }

#### **创建 JSP 页面** ####

在**src\\main\\webapp**文件夹中创建名为**demo**的新文件夹。在此文件夹中，创建新的**JSP**文件，如下所示：

**索引页**

在**src\\main\\webapp\\demo**文件夹中，创建名为**index.jsp的新****JSP**文件，如下所示：

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    	pageEncoding="ISO-8859-1" isELIgnored="false"%>
    <html>
    <head>
    <title>Ajax</title>
    <script src="${pageContext.request.contextPath }/assets/js/jquery.js"></script>
    <script type="text/javascript">
    	$(document).ready(function() {
    
    		$('#buttonClickMe').click(function() {
    			$.ajax({
    				type : 'GET',
    				url : '${pageContext.request.contextPath }/ajax',
    				success : function(result) {
    					$('#result').html(result);
    				}
    			});
    		});
    
    	});
    </script>
    </head>
    <body>
    
    	<h3>Demo Ajax</h3>
    	<input type="button" value="Click Me" id="buttonClickMe">
    	<br>
    	<span id="result"></span>
    
    </body>
    </html>

#### **Maven项目的结构** ####

![9fa5bf1f8558aeb0e6c69fbc00755903.png][]

#### **运行应用程序** ####

选择项目，右键单击并选择**Run As/Run on Server**菜单

使用以下 url访问**DemoServlet ：**

*  **http://localhost:8081/LearnJSPServletWithRealApps**
 *  **http://localhost:8081/LearnJSPServletWithRealApps/demo**

**输出**

![468f1575a91423607b95d6333c61c4f2.png][]

点击**点击我**按钮：

**输出**

![8c0fc1ea2eba55cd2ee5824cdfbbf83b.png][]

[93e293ef316e0b77c8bd2d8a75011298.png]: https://img-blog.csdnimg.cn/img_convert/93e293ef316e0b77c8bd2d8a75011298.png
[f5b0dfb35047212bb08bcb6f6ec4fa20.png]: https://img-blog.csdnimg.cn/img_convert/f5b0dfb35047212bb08bcb6f6ec4fa20.png
[6b0176798f4ad6a0c9f3d4074fa6edfd.png]: https://img-blog.csdnimg.cn/img_convert/6b0176798f4ad6a0c9f3d4074fa6edfd.png
[e249a1f0b309b273ba2a6519fae00911.png]: https://img-blog.csdnimg.cn/img_convert/e249a1f0b309b273ba2a6519fae00911.png
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBAYWxsd2F5Mg_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/24f11a5eb7c54d3f88e9a5f51cc2fadd.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAYWxsd2F5Mg==,size_17,color_FFFFFF,t_70,g_se,x_16
[9fa5bf1f8558aeb0e6c69fbc00755903.png]: https://img-blog.csdnimg.cn/img_convert/9fa5bf1f8558aeb0e6c69fbc00755903.png
[468f1575a91423607b95d6333c61c4f2.png]: https://img-blog.csdnimg.cn/img_convert/468f1575a91423607b95d6333c61c4f2.png
[8c0fc1ea2eba55cd2ee5824cdfbbf83b.png]: https://img-blog.csdnimg.cn/img_convert/8c0fc1ea2eba55cd2ee5824cdfbbf83b.png