jquery ajax示例
Ajax in Java JSP Servlet based web applications are very common. Recently I have written a lot about jQuery methods and how we can use them. Today we will look into one of the important jQuery functionality where we can easily execute AJAX calls and process the response in a Java Servlet JSP based web application.
Ajax在基于Java JSP Servlet的Web应用程序中非常常见。 最近，我写了很多有关jQuery方法以及如何使用它们的方法。 今天，我们将研究一种重要的jQuery功能，在其中我们可以轻松地执行AJAX调用并在基于Java Servlet JSP的Web应用程序中处理响应。
Ajax JSP Servlet示例 (Ajax JSP Servlet Example)
I am using Eclipse IDE for creating the “Dynamic Web Project”, you can use any other IDE too. Our main focus will be towards jQuery and AJAX call from JSP to a servlet. Below image shows the final project structure.
我正在使用Eclipse IDE创建“动态Web项目”，也可以使用任何其他IDE。 我们的主要重点是从JSP到servlet的jQuery和AJAX调用。 下图显示了最终的项目结构。
Ajax Servlet代码 (Ajax Servlet Code)
We have a very simple servlet that gets the userName from request, create a greetings and return it as plain text.
我们有一个非常简单的servlet，它从请求中获取用户名，创建问候语并将其作为纯文本返回。
package com.journaldev.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);
}
}Notice that I am using Servlet-3 annotations for configuration, if you like XML based configuration then you can do it in web.xml file. We will call this servlet asynchronously using jQuery AJAX support.
注意，我正在使用Servlet-3注释进行配置，如果您喜欢基于XML的配置，则可以在web.xml文件中进行。 我们将使用jQuery AJAX支持异步调用此servlet。
Ajax JSP页面 (Ajax JSP Page)
Below is our JSP page code, it has an input field where we can provide user name. As soon as focus is moved out of it, jQuery AJAX method will execute and call our servlet and process the response.
以下是我们的JSP页面代码，它具有一个输入字段，我们可以在其中提供用户名。 一旦焦点移开，jQuery AJAX方法将执行并调用我们的servlet并处理响应。
index.jsp code:
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>Notice that we have two JS files included in the JSP page, first one is the jQuery JS library and another one contains our JS code for ajax call. I am including jQuery JS from the code.jquery.com URL, we can also download it and keep with our JS file.
请注意，我们在JSP页面中包含两个JS文件，第一个是jQuery JS库，另一个包含用于ajax调用的JS代码。 我从code.jquery.com URL中包含jQuery JS，我们也可以下载它并保留我们的JS文件。
JSP code is very simple, we will populate ajaxGetUserServletResponse div content from the AJAX call response through jQuery.
JSP代码非常简单，我们将通过jQuery从AJAX调用响应中填充ajaxGetUserServletResponse div内容。
jQuery AJAX JavaScript文件 (jQuery AJAX JavaScript File)
Below is our javascript file code for jQuery AJAX request.
以下是我们针对jQuery AJAX请求的javascript文件代码。
app-ajax.js code:
app-ajax.js代码：
$(document).ready(function() {
$('#userName').blur(function(event) {
var name = $('#userName').val();
$.get('GetUserServlet', {
userName : name
}, function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
});
});
});We can also make jQuery AJAX call using it’s ajax() method, as shown below. Above is the shorthand approach to using ajax() method.
我们还可以使用ajax（）方法进行jQuery AJAX调用，如下所示。 上面是使用ajax（）方法的简便方法。
$(document).ready(function() {
$('#userName').blur(function() {
$.ajax({
url : 'GetUserServlet',
data : {
userName : $('#userName').val()
},
success : function(responseText) {
$('#ajaxGetUserServletResponse').text(responseText);
}
});
});
});Below is the syntax of the jQuery ajax() method, try to relate it to the above code and you will understand what’s going on here.
下面是jQuery ajax（）方法的语法，尝试将其与以上代码关联，您将了解这里发生的事情。
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});Our jQuery Ajax JSP Servlet Example application is ready, just build and deploy it in your favorite servlet container. Below image shows the output produced, I am using Chrome Developer tools to confirm that our servlet is getting called.
我们的jQuery Ajax JSP Servlet Example应用程序已准备就绪，只需在您喜欢的servlet容器中构建并部署它即可。 下图显示了产生的输出，我正在使用Chrome Developer工具来确认正在调用我们的servlet。
Ajax JSP Servlet示例摘要 (Ajax JSP Servlet Example Summary)
We learned the basics of jQuery AJAX support and how we can integrate it with Java web application, in next tutorials we will learn more features of jQuery that we can use in any web application. You can download the final project from the below link.
我们学习了jQuery AJAX支持的基础知识以及如何将其与Java Web应用程序集成，在接下来的教程中，我们将学习可在任何Web应用程序中使用的jQuery的更多功能。 您可以从下面的链接下载最终项目。
翻译自: https://www.journaldev.com/4742/jquery-ajax-jsp-servlet-java-example
jquery ajax示例
137
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
