jQuery AJAX JSP Servlet Java示例
Ajax在基于Java JSP Servlet的Web应用程序中非常常见。
最近，我写了很多有关jQuery方法以及如何使用它们的方法。
今天，我们将研究一种重要的jQuery功能，其中我们可以轻松地执行AJAX调用并在基于Java Servlet JSP的Web应用程序中处理响应。
Ajax JSP Servlet示例
我正在使用Eclipse IDE创建"动态Web项目"，也可以使用任何其他IDE。
我们的主要重点是从JSP到Servlet的jQuery和AJAX调用。
下图显示了最终的项目结构。
Ajax Servlet代码
我们有一个非常简单的servlet，它从请求中获取用户名，创建问候语并将其作为纯文本返回。
package com.theitroad.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> Ajax Response: <div id="ajaxGetUserServletResponse"></div> </body> </html>
请注意，我们在JSP页面中包含两个JS文件，第一个是jQuery JS库，另一个包含用于ajax调用的JS代码。
我从code.jquery.com URL中包含jQuery JS，我们也可以下载它并保留我们的JS文件。
JSP代码非常简单，我们将通过jQuery从AJAX调用响应中填充ajaxGetUserServletResponsediv内容。
jQuery AJAX JavaScript文件
以下是我们针对jQuery AJAX请求JavaScript文件代码。
app-ajax.js代码：
$(document).ready(function() {
$('#userName').blur(function(event) {
var name = $('#userName').val();
$.get('GetUserServlet', {
userName : name
}, function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
});
});
});
我们还可以使用ajax()方法进行jQuery 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 Example应用程序已准备就绪，只需在您喜欢的servlet容器中构建并部署它即可。
