How to fetch data from servlet using ajax?

Question

First of all, this might seem like a duplicate but I assure you I have tried many questions and still hasn't got a proper answer. So I'm asking this here.

I have an HTML form from which I would like to submit a query to a servlet and show the results in a different division.

My HTML code essentially consists of the following:

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

I have the following jQuery in order to handle the ajax call.

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

My QueryServlet is:

@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 {

}

}

Even when I submit a valid query, the div does not get loaded up with the data from the servlet. The data reaches the servlet and gets displayed in the console, but I am unable to retrieve that data from the script.

Do you get the alert? You should open up the Developer Tools if you are using Chrome, where you can see what's been actually transfered between the browser and your server. — xiaofeng.li
– xiaofeng.li, Commented Jan 12, 2015 at 11:51
I tried debugging with firebug. The breakpoint at the alert is never reached. — shyam
– shyam, Commented Jan 12, 2015 at 11:52
I think your issue is the url parameter in your jQuery ajax. See if this works: url: "/QueryServlet". — Buhake Sindi
– Buhake Sindi, Commented Jan 12, 2015 at 11:54
@BuhakeSindi The query does reach the servlet because I do get the console message printed at the server side. — shyam
– shyam, Commented Jan 12, 2015 at 11:56
use this button <input type="button" id="searchDoc" value="search"/> I think other button loads the page again — Arun Xavier
– Arun Xavier, Commented Jan 12, 2015 at 11:56

sirnino · Accepted Answer · 2015-01-12 12:05:15Z

1

The <button> tag is equivalent to an <input type="submit"/>. If you in your form tag don't declare any action attribute, the standard action causes that the page is reloaded. This causes that, although the returned data are inserted in #search-results div, you'll never be able to see them, because the page is immediately reloaded.

You should deactivate the default "Submit" button this way:

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

This should fix your problem!

answered Jan 12, 2015 at 12:05

sirnino

4273 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tiger · Accepted Answer · 2015-01-12 12:06:19Z

0

the issue seems related to context path, your path should look like this if servlet is not in context root :-

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

Thanks :)

answered Jan 12, 2015 at 12:06

Tiger

4341 gold badge4 silver badges14 bronze badges

Collectives™ on Stack Overflow

How to fetch data from servlet using ajax?

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related