How to Call Ajax request to fetch records from database and display on jsp using servlet on page load

Question

I have different fields in database and I need to show all the records in jsp but when I am making ajax request to servlet, it is binding all the results to all fields. I want firstname should be bind with firstname, lastname should be bind with lastname. Currently it is binding with frstname with firstanamelastname.

I've tried all level best to solve my problem but I think, the problem is with ajax request which I am making.

   <html>
   <head></head>
   <body>  
    <div class="form-row">
   <div class="col-md-9">
   <div class="form-row pad-left">
   <div class="col-md-6 mb-1">
   <label for="validationCustomUsername"><b>Birth Name:</b> 
   <span id='birthName'></span>                                                     
   </div>
   <div class="col-md-6 mb-3">
  <label for="validationCustomUsername"><b>Initiated Name:</b> 
  <span id='initiatedName'></span> 
  </div>
  </div>

<!-- SECOND ROW STARTS HERE -->
    <div class="form-row pad-left">
      <div class="col-md-6 mb-1">
    <label for="validationCustomUsername"><b>Place Of Birth: </b> 
   <span id='placeOfBirth'></span> 
   </div>
   </div>
    <div class="form-row pad-left">
     <div class="col-md-6 mb-1">
   <label for="validationCustomUsername"><b>Caste:</b>  
  <span id='caste'></span>
    </div>

     </body>

     </html>

          Servlet Code

       protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    response.setContentType("application/json");

    int userID = UserDetails.getInstance().getLastRegisteredID();
    Connection con = DBConnection.connectDB();
    String query = "Select * from PERSONS inner join 
          PersonsDetails on persons.PersonID=PersonsDetails.PersonId "
            + "where PERSONS.PersonID="+userID;
    try {
        ResultSet rs = DBConnection.getDBResultSet(con, query);
        UserDetails user = new UserDetails();
        while(rs.next()) {
            String birthName =rs.getString("BirthName");
            String initiatedName =rs.getString("InitiatedName");
            String placeOfBirth =rs.getString("PlaceOfBirth");
            String caste =rs.getString("Caste");



            response.getWriter().write(birthName);
            response.getWriter().write(initiatedName);
            response.getWriter().write(placeOfBirth);
            response.getWriter().write(caste);

        }
    } catch (SQLException e) {
        e.printStackTrace();
    }finally {
        DBConnection.closeDBConnection(con);
    }


}

         Ajax Call
     function userHomeDetails(){
var username = $('#username');
var url = "http://localhost:8080/IskconDevotteeMarriage/page/UserHome"
    $(document).ready(function(){
    var url=url
        $.post("../UserHomeController", function(responseText) {
            /*document.getElementById('birthName').innerHTML ="birthName"*/
                $('#birthName').html(responseText);
                $('#initiatedName').html(responseText);
                $('#placeOfBirth').html(responseText);
                $('#caste').html(responseText);
                alert(responseText);
        });
        });

}

score 0 · Accepted Answer · answered May 02 '19 at 04:40

You can use JSONObject ,firstly add json jar file and then in your servlet class create object of JSONObject like below :

JSONObject ob= new JSONObject();

And then put your parameter like below :

try {
        ob.put("birthName",birthName);
        ob.put("initiatedName",initiatedName);
       ob.put("placeOfBirth",placeOfBirth);
         ob.put("caste",caste);
    } catch (JSONException e) {
        e.printStackTrace();
    }

Now ,passed above parameter to your ajax call like below :

 response.getWriter().write(obj);

In your ajax call set dataType: "json" and in your function(responseText) you can get this parameter like below :

document.getElementById('birthName').value = responseText.birthName;//setting values to span with id birthName
document.getElementById('initiatedName').value = responseText.initiatedName;
document.getElementById('placeOfBirth').value = responseText.placeOfBirth;
document.getElementById('caste').value = responseText.caste;

Hope this helps !

Hi @swati, Is my ajax request correctly defined? I am unable to use dataType:"json", it is showing an error? Also, do I need to convert it to string while writing response like response.getWriter.write(ob.toString()) because when I am only writing response.getWriter.write(ob), it is showing an error. I am new here, that is why I am asking this much silly question. Your help is appriciated. — Ravi, May 02 '19 at 08:18
what error did it give,also i suggest you to used `$.ajax` instead of `$.post` ,check [this](https://stackoverflow.com/questions/9436534/ajax-tutorial-for-post-and-get) out — Swati, May 02 '19 at 08:48

How to Call Ajax request to fetch records from database and display on jsp using servlet on page load

1 Answers1