我无法显示我的 XML 响应 文件，我正在使用 servlet 和 AJAX。当我点击提交按钮时，它没有显示我想要的内容。
这些是我的文件:
index.jsp
<form action="AjaxServlet" method="post">
Nombre:
<input type="text" name="nombre" id="nombre"/>
<button type="submit" id="enviar" onclick="doCompletion();">
Enviar a Servlet
</button>
</form>
<br>
<div id="objetivo">
</div>
这是我的:ajax.js
var req;
var isIE;
function doCompletion() {
//var url = "autocomplete?action=complete&id=";
var nom = document.getElementById("nombre");
var url = "AjaxServlet?nombre=" + escape(nom.value);
req = initRequest();
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);
}
function initRequest(){
if (window.XMLHttpRequest) {
if (navigator.userAgent.indexOf('MSIE') !== -1) {
isIE = true;
}
return new XMLHttpRequest();
} else if (window.ActiveXObject) {
isIE = true;
return new ActiveXObject("Microsoft.XMLHTTP");
}
}
function callback() {
if (req.readyState === 4) {
if (req.status === 200) {
myFuncion(req.responseXML);
}
}
}
function myFuncion(responseXML) {
if (responseXML === null) {
return false;
} else {
var personas = responseXML.getElementsByTagName("personas")[0];
var objetivo = document.getElementById("objetivo");
var p = document.createElement("p");
for(count = 0; count < personas.childNodes.length; count++) {
var persona = personas.childNodes[count];
//var persona = personas.getElementsByTagName("persona")[0];
p.appendChild(persona.childNodes[0].nodeValue);
}
objetivo.appendChild(p);
}
}
这是我的Servlet
protected void processRequest(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException
{
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String nombre = request.getParameter("nombre");
Date date = new Date();
DateFormat hourFormat = new SimpleDateFormat("HH:mm:ss");
StringBuilder sb = new StringBuilder("");
sb.append("<personas>");
sb.append("<persona>");
//sb.append(nombre).append(", son las: ").append(hourFormat.format(date));
sb.append("Hola");
sb.append("</persona>");
sb.append("</personas>");
response.getWriter().write(sb.toString());
}
这是屏幕上显示的内容，我不知道为什么:
最佳答案
您需要做的是更改您的表单代码，因为当您点击按钮时，将执行表单的操作而不是按钮的 onclick 事件。像这样改变它:
<form>
Nombre:
<input type="text" name="nombre" id="nombre"/>
<button type="submit" id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
</form>
或者更改按钮代码:
<form action="AjaxServlet" method="post">
Nombre:
<input type="text" name="nombre" id="nombre"/>
<button id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
</form>
更新:
我已经使用一些 jQuery 在一个工作示例中模拟了您的应用程序(我还对您的 javascript 进行了一些修改):
索引.jsp :
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script>
function doCompletion()
{
$.ajax({
type: 'POST',
url: 'AjaxServlet',
data: {
nombre: $('#nombre').val()
},
beforeSend: function () {
},
success: function (data) {
myFuncion(data);
},
error: function () {
alert('error');
}
});
}
function myFuncion(responseXML)
{
var personas = responseXML.getElementsByTagName("personas")[0];
var objetivo = document.getElementById("objetivo");
var p = document.createElement("p");
for(count = 0; count < personas.childNodes.length; count++)
{
var persona = personas.childNodes[count];
p.appendChild(persona);
}
objetivo.appendChild(p);
}
</script>
</head>
<body>
Nombre:<input type="text" name="nombre" id="nombre"/>
<button id="enviar" onclick="doCompletion();">Enviar a Servlet</button>
<br>
<div id="objetivo">
</div>
</body>
</html>
网络.xml:
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<servlet>
<servlet-name>AjaxServlet</servlet-name>
<servlet-class>AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AjaxServlet</servlet-name>
<url-pattern>/AjaxServlet</url-pattern>
</servlet-mapping>
<session-config>
<session-timeout>
30
</session-timeout>
</session-config>
</web-app>
小服务程序:
public class AjaxServlet extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml");
response.setHeader("Cache-Control", "no-cache");
String nombre = request.getParameter("nombre");
Date date = new Date();
DateFormat hourFormat = new SimpleDateFormat("HH:mm:ss");
StringBuilder sb = new StringBuilder("");
sb.append("<personas>");
sb.append("<persona>");
//sb.append(nombre).append(", son las: ").append(hourFormat.format(date));
sb.append("["+hourFormat.format(date)+"] Hola "+nombre);
sb.append("</persona>");
sb.append("</personas>");
response.getWriter().write(sb.toString());
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
}
输出:
享受 :)
关于java - 无法使用 JavaScript 显示 XML 文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30328185/