如何使用ajax从servlet获取数据？答案

【问题标题】：How to fetch data from servlet using ajax?如何使用ajax从servlet获取数据？
【发布时间】：2015-01-12 11:42:03
【问题描述】：

首先，这似乎是重复的，但我向您保证，我已经尝试了很多问题，但仍然没有得到正确的答案。所以我在这里问这个。

我有一个 HTML 表单，我想通过该表单向 servlet 提交查询，并在不同的分区中显示结果。

我的 HTML 代码主要包含以下内容：

<form>
    <input name="query" id="query" placeholder="Query">
    <button id="searchDoc">Search</button>
</form>
<div id="search-results"></div>

我有以下 jQuery 来处理 ajax 调用。

$('#searchDoc').click(function() {
      var q = $('#query').val();
      $.ajax({
         url: "QueryServlet",
         data: {query:q},
         success: function(data) {
             alert("data: " + data);
             $('#search-results').html(data);
         }
      });
  });

我的QueryServlet 是：

@WebServlet("/QueryServlet")
public class QueryServlet extends HttpServlet {
private static final long serialVersionUID = 1L;

/**
 * @see HttpServlet#HttpServlet()
 */
public QueryServlet() {
    super();
}

/**
 * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
 */
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    PrintWriter out = response.getWriter();
    String query = request.getParameter("query");
    QueryUtil qu = new QueryUtil();
    String mySqlQuery = qu.buildMySQLSearchQuery(query);
    System.out.println(mySqlQuery);
    Connection con = null;
    Statement st = null;
    ResultSet rs = null;
    try {
        con = new DbConnection().getConnection();
        st = con.createStatement();
        rs = st.executeQuery(mySqlQuery);
        if(rs != null) {
            response.setStatus(HttpServletResponse.SC_OK);
            while(rs.next()) {
                out.println("<a href=\"DownloadServlet?docId=" + rs.getInt("id") + "\">" + rs.getString("fileName") + "</a>");
            }
        } else {
            // TODO add keywords to database
        }
    } catch (SQLException e) {
        e.printStackTrace();
    }
}

/**
 * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
 */
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

}

}

即使我提交了一个有效的查询，div 也不会加载来自 servlet 的数据。数据到达 servlet 并显示在控制台中，但我无法从脚本中检索该数据。

【问题讨论】：

您收到警报了吗？如果您使用的是 Chrome，您应该打开开发者工具，您可以在其中查看浏览器和服务器之间实际传输的内容。
我尝试使用 firebug 进行调试。永远不会到达警报处的断点。
我认为您的问题是您的 jQuery ajax 中的 url 参数。看看这是否有效：url: "/QueryServlet".
@BuhakeSindi 查询确实到达了 servlet，因为我确实在服务器端打印了控制台消息。
使用此按钮<input type="button" id="searchDoc" value="search"/> 我认为其他按钮会再次加载页面

标签： java javascript jquery ajax servlets

【解决方案1】：

<button> 标签等同于<input type="submit"/>。如果您在 form 标记中未声明任何 action 属性，则标准操作会导致页面重新加载。这导致虽然返回的数据被插入到#search-results div 中，但您永远看不到它们，因为页面会立即重新加载。

您应该通过这种方式停用默认的“提交”按钮：

$('#searchDoc').click(function(e) {
      e.preventDefault();
      [....]
  });

这应该可以解决您的问题！

【讨论】：

【解决方案2】：

问题似乎与上下文路径有关，如果 servlet 不在上下文根目录中，您的路径应如下所示：-

<host> / <context path>/ <servlet>

谢谢:)

【讨论】：