如何使用连接Servlet的jQuery AJAX更改JSP页面内容
How to change JSP page content using jQuery AJAX that connects Servlet?
我是JSP新手。我的问题是,我想在按钮单击事件时使用AJAX更改我的JSP页面内容。我怎样才能……?
这是我的'AjaxTest' JSP文件
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script type="text/javascript">
$(document).ready(function () {
$('#GetData').click(function () {
<%--
I want correct codes here,
that connects to my 'AjaxData' servlet
and get it's xml content by tags
and place them in '#PlaceData' paragraph.
--%>
});
</script>
</head>
<body>
<button id="GetData" onclick="loadData">Load</button>
<p id="PlaceData"></p>
</body>
</html>
这是我的'AjaxData' servlet GET方法
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String content = "<?xml version='"1.0'" encoding='"UTF-8'"?>"
+ "<person1>"
+ "<firstname>"
+ "Indunil"
+ "</firstname>"
+ "<lastname>"
+ "Girihagama"
+ "</lastname>"
+ "</person1>";
response.getWriter().write(content);
}
请告诉我正确的代码来解决我的问题使用jQuery AJAX.
我找到了解决方案
AjaxTest.jsp文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#GetData").mouseenter(function () {
$(this).html('Load Content');
});
$("button").click(function () {
$.ajax({
type: "GET",
url: "AjaxData",
dataType: "xml",
success: function (xml) {
$("#PlaceData").html("<hr>");
$(xml).find('product').each(function () {
var id = $(this).find('id').text();
var name = $(this).find('name').text();
var price = $(this).find('price').text();
var discount = $(this).find('discount').text();
$("#PlaceData").append(id + "<br>");
$("#PlaceData").append(name + "<br>");
$("#PlaceData").append(price + "<br>");
$("#PlaceData").append(discount + "<br>");
$("#PlaceData").append("<hr>");
});
$("#GetData").html('AJAX Request is succeded!');
},
error: function () {
$("#GetData").html('An error occurred while processing XML file!');
}
});
});
});
</script>
</head>
<body>
<button id="GetData" onclick="loadData">Load Content</button>
<div id="PlaceData">
<hr>
</div>
</body>
</html>
AjaxData (Servlet)
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setCharacterEncoding("UTF-8");
String content = "<?xml version='"1.0'" encoding='"UTF-8'"?>'n"
+ "<products>'n"
+ " <product>'n"
+ " <id>P-22345</id>'n"
+ " <name>LCD Television</name>'n"
+ " <price>$500</price>'n"
+ " <discount>5%</discount>'n"
+ " </product>'n"
+ " <product>'n"
+ " <id>P-13245</id>'n"
+ " <name>Mac Mini</name>'n"
+ " <price>$700</price>'n"
+ " <discount>2%</discount>'n"
+ " </product>'n"
+ " <product>'n"
+ " <id>P-52346</id>'n"
+ " <name>Home Theatre</name>'n"
+ " <price>$500</price>'n"
+ " <discount>1%</discount>'n"
+ " </product>'n"
+ " <product>'n"
+ " <id>P-78385</id>'n"
+ " <name>Laptop Computer</name>'n"
+ " <price>$1500</price>'n"
+ " <discount>5%</discount>'n"
+ " </product>'n"
+ " <product>'n"
+ " <id>P-78385</id>'n"
+ " <name>Desktop Computer</name>'n"
+ " <price>$1000</price>'n"
+ " <discount>7%</discount>'n"
+ " </product>'n"
+ "</products>";
response.getWriter().write(content);
}
web . xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
<servlet>
<servlet-name>AjaxData</servlet-name>
<servlet-class>AjaxData</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxData</servlet-name>
<url-pattern>/AjaxData</url-pattern>
</servlet-mapping>
</web-app>
相关文章:
- 在更改名称时,使用ajax jsp在下拉菜单中填充多个文件夹的数据
- 使用jsp更改表格单元格的颜色
- 如何根据jsp中某个下拉选项的值来更改表单中字段的属性
- 在更改为 jsp 2 并返回到 jsp 1 后,将变量值保留在 jsp 1 中
- 如何在组合框值更改时自动重定向下一个 jsp 页面
- 操作类无法从 JSP 获取更改的值
- 如何使用 javascript 更改选择列表 jsp 中的选项
- 如何更新在 SQL Server 数据库中发生某些更改时通过 jsp 显示的表内容
- 如何从 javascript 更改 JSP 中的消息文本
- 如何在 JSP 中读取 jsp 内部的值打印(作为自定义 HTML 标记)更改事件
- 如何将组合框的动态更改值获取到同一JSP页面中的另一个文本字段中
- 如何将动态更改的参数从一个jsp页面发送到另一个jsp页
- 通过JSP中的Servlet更改页面
- 检测JSP中的下拉更改
- Html在jsp中的jquery即时过滤器后单击时选择不更改选项
- 如何在JSP中设置下拉菜单的选择更改值
- 是否有任何方法可以在客户端使用javascript更改jsp自定义标记值
- 如何在 JSP 中选择更改时显示值
- AJAX没有'不要动态更改我的JSP
- 在两个jsp页面之间传递值时,值发生了更改