Ajax post from JSP to servlet in Java?

Question

So, here is what I want to achieve. Lets say I have a form and I fill up the details and click on submit. The data will be inserted to the database. Now,my idea is that I want to display the data I just added to the DB using ajax without having to refresh the page. I am learning the idea of working with ajax and so I am a bit lost. Can someone suggest any advise. The idea is that when I click on submit, there will be two events that will be triggered. One is inserting the data to the db and the other getting the data from the db and displaying it inside the tags.

This is my get method in my servlet. Home.java

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        // TODO Auto-generated method stub
         PrintWriter out = response.getWriter();
         response.setContentType("text/html");
         out.println("<html><body>");
         try {
            Class.forName("com.mysql.jdbc.Driver");
            Connection con= (Connection) DriverManager.getConnection("jdbc:mysql://localhost/apiprovider","root","");
             Statement stmt = con.createStatement();
             ResultSet rs = stmt.executeQuery("select * from apiinfo");
            // out.println("<table border=1 width=50% height=50%>");
            // out.println("<tr><th>EmpId</th><th>EmpName</th><th>Salary</th><tr>");
             while (rs.next()) {
                 String n = rs.getString("apiname");
                 String nm = rs.getString("apiendpoint");
                 int s = rs.getInt("id"); 
                 response.getWriter().write(n);

                // out.println("<tr><td>" + n + "</td><td>" + nm + "</td><td>" + s + "</td></tr>"); 
             }
           //  out.println("</table>");
            // out.println("</html></body>");
             con.close();
            }
             catch (Exception e) {
             out.println("error");
         }
     }

Home.jsp

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
<div id="ajaxresponse">


</div>
<form>
 API Name:<br>
  <input type="text" id = "apiname" name="apiname">
   API ENDPOINT:<br>
  <input type="text" id ="apiendpoint" name="apiendpoint">
  <br>
  API VERSION:<br>
  <input type="text" id="apiversion" name="apiversion">
   ACCESSIBLE:<br>
  <input type="checkbox" name="source" value="internet"> Internet<br>
    <input type="checkbox" name="source" value="vpn"> VPN<br>

  <br><br>
  <input type="submit" formaction="Home" method="post" value="Submit">
  <br>
    <input type="submit" name="Submit" value="Submit">

</form> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#Submit').click(function(event) {
        console.log("You clicked me");
        $.ajax({
              url: "Home",
              sucess:function(result){

              }
            });
    });
});
</script>
</body>
</html>

score 0 · Answer 1 · answered Jul 11 '17 at 13:58

I think you don't need to have two events. You should send ajax call to servlet and get from it properly formatted JSON (with data from DB). In that case, when you will receive data you know that insert was successful. After that in you sucess function you need to parse response from servlet and useing javaScrip set data into elements of you form.

score 0 · Answer 2 · answered Jul 11 '17 at 13:58

you can achieve this in multiple ways based on your fail over scenarios
please go through this link for better understanding of ajax with servlets.
On click of submit button first insert the data into db if this call is success then trigger one more ajax call to get data from db to display please check below sudo code

<script type="text/javascript">
$(document).ready(function() {
    $('#Submit').click(function(event) {
        console.log("You clicked me");
        $.ajax({
              url: "Home",
              sucess:function(result){
                // here call another servlet which will get the data
              }
            });
    });
});
</script>

if the insert call fails you can mention generic message like "insertion failed please try again later"

Ajax post from JSP to servlet in Java?

2 Answers2