Javascript 如何使用连接Servlet的jQueryAjax更改JSP页面内容？
我不熟悉JSP。 我的问题是，我想在按钮单击事件中使用AJAX更改JSP页面内容。。 我该怎么做 这是我的'AjaxTest'JSP文件Javascript 如何使用连接Servlet的jQueryAjax更改JSP页面内容？,javascript,jquery,ajax,jsp,jquery-ajaxq,Javascript,Jquery,Ajax,Jsp,Jquery Ajaxq,我不熟悉JSP。 我的问题是，我想在按钮单击事件中使用AJAX更改JSP页面内容。。 我该怎么做 这是我的'AjaxTest'JSP文件 JSP页面 $（文档）.ready（函数（）{ $（'#GetData'）。单击（函数（）{ 我找到了解决办法 AjaxTest.jsp文件 JSP页面 $（文档）.ready（函数（）{ $（“#GetData”）.mouseenter（函数（）{ $（this.html（'Load Content'）； }); $（“按钮”）。单击（函数（）{ $.a
JSP页面
$（文档）.ready（函数（）{
$（'#GetData'）。单击（函数（）{
我找到了解决办法
AjaxTest.jsp文件
JSP页面
$（文档）.ready（函数（）{
$（“#GetData”）.mouseenter（函数（）{
$（this.html（'Load Content'）；
});
$（“按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“AjaxData”，
数据类型：“xml”，
成功：函数（xml）{
$（“#PlaceData”）.html（“
”）；
$（xml）.find（'product'）.each（函数（）{
var id=$（this.find（'id'）.text（）；
var name=$（this.find（'name'）.text（）；
var price=$（this.find（'price'）.text（）；
var折扣=$（this）.find（'discount'）.text（）；
$（“#PlaceData”）。追加（id+”
”；
$（“#PlaceData”）。追加（名称+”
”；
$（“#PlaceData”）。追加（价格+”
”；
$（“#PlaceData”）。追加（折扣+”
”；
$（“#PlaceData”）。追加（“
”）；
});
$（“#GetData”）.html（'AJAX请求成功！'）；
},
错误：函数（）{
$（“#GetData”）.html（'处理XML文件时出错！'）；
}
});
});
});
装载量
AjaxData[Servlet]
protectedvoid doGet（HttpServletRequest请求，HttpServletResponse响应）
抛出ServletException、IOException{
setContentType（“text/xml”）；
响应。setCharacterEncoding（“UTF-8”）；
字符串内容=“\n”
+“\n”
+“\n”
+“P-22345\n”
+“液晶电视\n”
+“$500\n”
+“5%\n”
+“\n”
+“\n”
+“P-13245\n”
+“Mac迷你版\n”
+“$700\n”
+“2%\n”
+“\n”
+“\n”
+“P-52346\n”
+“家庭影院\n”
+“$500\n”
+“1%\n”
+“\n”
+“\n”
+“P-78385\n”
+“笔记本电脑\n”
+“$1500\n”
+“5%\n”
+“\n”
+“\n”
+“P-78385\n”
+“桌面计算机\n”
+“$1000\n”
+“7%\n”
+“\n”
+ "";
response.getWriter（）.write（内容）；
}
web.xml文件
30
AjaxData
AjaxData
AjaxData
/AjaxData
我找到了解决方案
AjaxTest.jsp文件
JSP页面
$（文档）.ready（函数（）{
$（“#GetData”）.mouseenter（函数（）{
$（this.html（'Load Content'）；
});
$（“按钮”）。单击（函数（）{
$.ajax({
键入：“获取”，
url:“AjaxData”，
数据类型：“xml”，
成功：函数（xml）{
$（“#PlaceData”）.html（“
”）；
$（xml）.find（'product'）.each（函数（）{
var id=$（this.find（'id'）.text（）；
var name=$（this.find（'name'）.text（）；
var price=$（this.find（'price'）.text（）；
var折扣=$（this）.find（'discount'）.text（）；
$（“#PlaceData”）。追加（id+”
”；
$（“#PlaceData”）。追加（名称+”
”；
$（“#PlaceData”）。追加（价格+”
”；
$（“#PlaceData”）。追加（折扣+”
”；
$（“#PlaceData”）。追加（“
”）；
});
$（“#GetData”）.html（'AJAX请求成功！'）；
},
错误：函数（）{
$（“#GetData”）.html（'处理XML文件时出错！'）；
}
});
});
});
装载量
AjaxData[Servlet]
protectedvoid doGet（HttpServletRequest请求，HttpServletResponse响应）
抛出ServletException、IOException{
setContentType（“text/xml”）；
响应。setCharacterEncoding（“UTF-8”）；
字符串内容=“\n”
+“\n”
+“\n”
+“P-22345\n”
+“液晶电视\n”
+“$500\n”
+“5%\n”
+“\n”
+“\n”
+“P-13245\n”
<%@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>
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);
}
<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>
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);
}
<?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>