How to fetch data into text fields from database using ajax

                            How to fetch data into text fields from database using ajax




<div class="col-md-6">
<div class="form-group has-success">
<span style="color: red">*</span> <label class="text-danger"><strong>BOOK
ID :</strong></label> <input type="text" class="form-control" name="lib_bookID"
id="lib_bookID" maxlength="15" onkeyup="get(this.value,<%=session.getAttribute("sid") %>)" />
</div>


<div class="form-group has-success">
<span style="color: red">*</span> <label class="text-danger"><strong>AUTHOR
NAME :</strong></label> <input type="text" class="form-control"
name="lib_author" id="lib_author" readonly="readonly"
maxlength="25" />
</div>


<div class="form-group has-success">
<span style="color: red">*</span> <label class="text-danger"><strong>DATE
OF ISSUE :</strong></label> <input type="text" class="form-control datepicker"
name="doi" id="doi" maxlength="10"
onkeypress="return isNumber(event)" />
</div>

</div>

<div class="col-md-6">
<div class="form-group has-success">
<span style="color: red">*</span> <label class="text-danger"><strong>BOOK
NAME :</strong></label> <input type="text" class="form-control"
name="lib_book_name" id="lib_book_name" maxlength="25" />
</div>

<div class="form-group has-success">
<span style="color: red">*</span> <label class="text-danger"><strong>PUBLICATION
NAME :</strong></label> <input type="text" class="form-control"
name="publication_book" id="publication_book" />
</div>




Step-1>make a servlet class and put this

protected void doGet(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub

String book_number = request.getParameter("book_number");


String sid=request.getParameter("sid");

System.out.println(book_number);
System.out.println(sid);

String book, auth, puslh;
try {

Connection con = JDBCUtil.getConnection();
PreparedStatement ps = con
.prepareStatement("SELECT BOOK_NAME,AUTHOR_NAME,PUBLISHER_NAME from BOOK_REGISTRATION where BOOK_NUMBER=? and SID=?");
ps.setString(1, book_number);
ps.setString(2, sid);
ResultSet rs = ps.executeQuery();
if (rs.next()) {
book = rs.getString("BOOK_NAME");

auth = rs.getString("AUTHOR_NAME");

puslh = rs.getString("AUTHOR_NAME");
} else {
book = "";
auth = "";
puslh = "";
}
response.getWriter().write(book + "," + auth + "," + puslh);


} catch (Exception e) {

e.printStackTrace();
}


}


Step-2> take it in jsp page

<script>
     
        function get(book_number,sid)
               {
                   var xmlhttp=new XMLHttpRequest();
                   xmlhttp.onreadystatechange=function()
                     {
                     if (xmlhttp.readyState==4 && xmlhttp.status==200)
                       {
                   
                   
                    var responseArray = xmlhttp.responseText.split(",");
                         document.getElementById("lib_book_name").value=responseArray[0];
                         document.getElementById("lib_author").value=responseArray[1];
                         document.getElementById("publication_book").value=responseArray[2];
                       }
                     };
                  xmlhttp.open("GET","Getdata?book_number="+book_number + "&sid="+sid ,true);
                   xmlhttp.send();

               }

        </script>

After all this, enter book id and press Enter button,then you will get automatic data into fields

Note-Before making this please make book id fields auto complete


Thanks
Keep Learning......................................