jQuery AJAX JSP Servlet Java的一个示例

2 年 ago

新, 韵

2 minutes

在基于Java JSP Servlet的Web应用中，Ajax非常常见。最近我写了很多关于jQuery方法及其如何使用的内容。今天我们将探讨一个重要的jQuery功能，通过它我们可以轻松执行Ajax调用并在基于Java Servlet JSP的Web应用中处理响应。

Ajax JSP Servlet 示例

我正在使用Eclipse IDE创建“Dynamic Web Project”，你也可以使用其他任何IDE。我们的主要关注点将是从JSP调用servlet的jQuery和AJAX。下图展示了最终的项目结构。

Ajax Servlet 代码

我们有一个非常简单的servlet，从请求中获取用户名，创建一条问候语并将其作为纯文本返回。

package com.Olivia.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("/GetUserServlet")
public class GetUserServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;

	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

		String userName = request.getParameter("userName").trim();
		if(userName == null || "".equals(userName)){
			userName = "Guest";
		}
		
		String greetings = "Hello " + userName;
		
		response.setContentType("text/plain");
		response.getWriter().write(greetings);
	}

}

请注意，我在使用Servlet-3的注解进行配置。如果你喜欢基于XML的配置，你可以在web.xml文件中进行。我们将使用jQuery AJAX支持来异步调用这个servlet。

Ajax JSP页面

以下是我们的JSP页面代码，其中有一个输入字段，我们可以在其中提供用户名。一旦焦点移出该字段，jQuery AJAX方法将执行并调用我们的servlet并处理响应。index.jsp 代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jQuery, Ajax and Servlet/JSP integration example</title>

<script src="https://code.jquery.com/jquery-1.10.2.js"
	type="text/javascript"></script>
<script src="js/app-ajax.js" type="text/javascript"></script>
</head>
<body>

	<form>
		Enter Your Name: <input type="text" id="userName" />
	</form>
	<br>
	<br>

	<strong>Ajax Response</strong>:
	<div id="ajaxGetUserServletResponse"></div>
</body>
</html>

请注意，我们在JSP页面中包含了两个JS文件，第一个是jQuery JS库，另一个包含了我们用于Ajax调用的JS代码。我正在从code.jquery.com的URL中包含jQuery JS，我们也可以下载它并与我们的JS文件一起保存。JSP代码非常简单，我们将通过jQuery从Ajax调用的响应中填充ajaxGetUserServletResponse div内容。

jQuery的AJAX JavaScript文件

以下是我们的Javascript文件代码，用于jQuery AJAX请求。app-ajax.js代码：

$(document).ready(function() {
        $('#userName').blur(function(event) {
                var name = $('#userName').val();
                $.get('GetUserServlet', {
                        userName : name
                }, function(responseText) {
                        $('#ajaxGetUserServletResponse').text(responseText);
                });
        });
});

我们也可以使用jQuery的ajax()方法进行AJAX调用，如下所示。以上是使用ajax()方法的简写方法。

$(document).ready(function() {
	$('#userName').blur(function() {
		$.ajax({
			url : 'GetUserServlet',
			data : {
				userName : $('#userName').val()
			},
			success : function(responseText) {
				$('#ajaxGetUserServletResponse').text(responseText);
			}
		});
	});
});

以下是jQuery ajax()方法的语法，请尝试与上述代码联系起来，您将会明白这里发生了什么。

$.ajax({
  url: url,
  data: data,
  success: success,
  dataType: dataType
});

我们的jQuery Ajax JSP Servlet示例应用已准备就绪，只需在您喜欢的servlet容器中进行构建和部署。下面的图片显示了生成的输出，我使用Chrome开发者工具来确认我们的servlet是否被调用。

Ajax的JSP Servlet示例概述

在接下来的教程中，我们学习了jQuery AJAX的基础支持以及如何将其与Java网页应用程序集成，接下来我们将学习更多jQuery的功能，可以在任何网页应用程序中使用。您可以通过以下链接下载最终项目。

下载jQuery AJAX Java Web应用项目