固定
我一直在关注一个非常简单的查询ajax的教程。
本教程从JSP表单中获取一个字符串，然后（出于某种原因）使用map将其放入一个对象中，然后使用Gson将其作为json返回给jquery。我不知道他为什么那样做。
我的版本从JSP表单中获取搜索查询并尝试返回一个常量字符串（只是为了测试直到我让它工作）。
我的JSP页面加载，当我在搜索框中输入时，我的搜索消失了。所以它在某种程度上起作用。但是我得不到结果串＃34;你好＆＃34;显示给我。
我会在这里粘贴代码，因为它应该比阅读我的描述更简单，更容易看。谢谢你的阅读。
请注意我花了好几个小时试图查看我是否在任何地方使用了错误的名字，但无法发现任何内容。
索引jsp
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Anime List Creator</title>
<script src="webresources/jquery-2.1.3.min.js"></script>
<script src="webresources/basic.js"></script>
<!--<link rel="stylesheet" href="webresources/css/basic.css" type="text/css" media="screen"/>-->
</head>
<body>
<h1>Anime List Creator</h1>
<form id="searchForm">
<label for="searchQuery">Make a search</label>
<input type="text" id="searchQuery" name="searchQuery"/>
<input type="submit"/>
</form>
<p id="displaySearchResults"/>
<hr/>
</body>
</html>
的javascript
$(document).ready(function(){
$('#searchForm').submit(function(){
$.ajax({
url: 'search',
type: 'POST',
dataType: 'text',
data: $('#searchForm'.serialize()),
success: function(data){
// if(data.isValid){
alert("hi");
$('#displaySearchResults').html("Results:" + data.resultsString);
$('#displaySearchResults').slideDown(500);
// }
// else{
// alert('Enter a valid search term.');
// }
}
});
return false;
});
});
SearchServlet（对不起，很多评论）。
/*
* To change this license header, choose License Headers in Project Properties.
* To change this template file, choose Tools | Templates
* and open the template in the editor.
*/
package main;
import entities.Anime;
import entities.Ann;
import entities.Info;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.HashMap;
import java.util.Map;
import javax.ejb.EJB;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
*
* @author J
*/
@WebServlet(name = "SearchServlet", urlPatterns = {"/search"})
public class SearchServlet extends HttpServlet {
@EJB
private AnnJAXB annj;
// @EJB
// private AnnJAXB annJAXB = new AnnJAXB();
@EJB
private Ann ann;
/**
* Processes requests for both HTTP <code>GET</code> and <code>POST</code>
* methods.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
try (PrintWriter out = response.getWriter()) {
/* TODO output your page here. You may use following sample code. */
out.println("<!DOCTYPE html>");
out.println("<html>");
out.println("<head>");
out.println("<title>Servlet SearchServlet</title>");
out.println("</head>");
out.println("<body>");
out.println("<h1>Servlet SearchServlet at " + request.getContextPath() + "</h1>");
out.println("</body>");
out.println("</html>");
}
}
// <editor-fold defaultstate="collapsed" desc="HttpServlet methods. Click on the + sign on the left to edit the code.">
/**
* Handles the HTTP <code>GET</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
processRequest(request, response);
}
/**
* Handles the HTTP <code>POST</code> method.
*
* @param request servlet request
* @param response servlet response
* @throws ServletException if a servlet-specific error occurs
* @throws IOException if an I/O error occurs
*/
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// processRequest(request, response);
// Map <String, Object> map = new HashMap<String, Object>();
String searchQuery = request.getParameter("searchQuery");
// map.put("searchQuery", searchQuery);
// returnResults(response, map);
returnResults(response, searchQuery);
}
private void returnResults(HttpServletResponse response, String searchQuery) throws IOException{
response.setContentType("text/html");
response.setCharacterEncoding("UTF-8");
String resultsString = "hello";
// try{
// for (Anime anime : annj.Unmarshalling(searchQuery).getAnn()) {
//
// resultsString = resultsString + " " + anime.getId() + " "
// + anime.getName() + " " ;
//
//
//// out.println("<h1>ID: " + anime.getId() + "</h1>");
//// out.println("<h1>Name: " + anime.getName() + "</h1>");
//
// for (Info temp : anime.getAnime()) {
// if (temp.getSrc() != null) {
// resultsString = resultsString + " " + temp.getSrc();
// }
// }
// }}catch(Exception e){}
response.getWriter().write(resultsString);
}
/**
* Returns a short description of the servlet.
*
* @return a String containing servlet description
*/
@Override
public String getServletInfo() {
return "Short description";
}// </editor-fold>
}
我的文件结构：
！[http://i.stack.imgur.com/3uhOI.jpg][1]
我是否错误地在jsp中指定了js的路径？
![http://i.stack.imgur.com/3uhOI.jpg][1]](http://i.stack.imgur.com/3uhOI.jpg][1]){kind=link}
<script src="webresources/basic.js"></script>
http://i.stack.imgur.com/3uhOI.jpg
修正了路径问题。现在没有Chrome控制台中的javascript错误。但是，当我进行搜索时，没有任何内容仍然显示，甚至不是alert "hi"
已修复：已更改
data: $('#searchForm'.serialize()),
到
data: $('#searchForm').serialize(),
答案 0 :(得分：0)
从项目结构来看，Web应用程序资产所在的主文件夹是Web Pages。你可以识别这个文件夹（尽管它有名字），因为它里面有WEB-INF文件夹。
问题是您获得了localhost:8080/prototype11/webresources/basic.js的404，因为此路径中没有webresources文件夹。相反，您已将JavaScript文件放在包中。
只需创建正确的文件夹并相应地移动文件即可。您的网页文件夹结构应如下所示：
- Web Pages
- webresources
+ basic.js
+ jquery-2.1.3.min.js
+ index.jsp
从源包中删除包webresources。
除此之外，最好使用绝对路径来检索资源而不是相对路径。在JSP中，使用${pageContext.request.contextPath}：
<script src="${pageContext.request.contextPath}/webresources/jquery-2.1.3.min.js"></script>
<script src="${pageContext.request.contextPath}/webresources/basic.js"></script>