Thursday 31 March 2016

Comment Form


Comment Form  using AJAX in Java

  • In this example, we are creating a form to post comment. The form data is saved in the database and a list of all posted comments are shown below the comment form.
  • Steps to create comment form example using AJAX in Java
  • You need to follow following steps:
  • Create table in database
  • load the org.json.jar file
  • Create comment form
  • Create server side page to save the form data and print all posted comments
  • Create table in database

In this example, we are using oracle 10g database. The table structure is given below:



  • The id field of "usercomment" table is auto incremented.
  • Load the org.json.jar file
  • In this page, we have created a form that gets input from the user. When user clicks on the Post Comment button,postComment() function is called. We have written all the ajax code inside this function.

index.html:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <script> 
  5. var request; 
  6. function postComment(){ 
  7. var comment=document.commentform.comment.value; 
  8. var email=document.commentform.email.value; 
  9. var url="index.jsp?comment="+comment+"&email="+email; 
  10. if(window.XMLHttpRequest){ 
  11. request=new XMLHttpRequest(); 
  12. } 
  13. else if(window.ActiveXObject){ 
  14. request=new ActiveXObject("Microsoft.XMLHTTP"); 
  15. } 
  16. try{ 
  17. request.onreadystatechange=function(){ 
  18. if(request.readyState==4){ 
  19. var val=request.responseText; 
  20. document.getElementById('mylocation').innerHTML=val; 
  21. } 
  22. }//end of function 
  23. request.open("GET",url,true); 
  24. request.send(); 
  25. }catch(e){alert("Unable to connect to server");} 
  26. } 
  27. </script> 
  28. </head> 
  29. <body> 
  30. <h1>Comment Form</h1> 
  31. <form name="commentform"> 
  32. Enter Comment:<br/> 
  33. <textarea name="comment" style="width:300px;height:100px" required> 
  34. </textarea><br/> 
  35. Enter Email:<br/> 
  36. <input type="text" name="email" required/><br/><br/> 
  37. <input type="button" value="Post Comment" onclick="postComment()"> 
  38. </form> 
  39. <span id="mylocation"></span> 
  40. </body> 
  41. </html> 

Create server side page to process the request:


In this jsp page, we are writing the database code to save the comment and print all comments.


index.jsp:

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <style> 
  5. div.box{margin:2px;border:1px solid pink;padding:10px;background-color:#e3e3e3} 
  6. </style> 
  7. </head> 
  8. <body> 
  9. <%@ page import="java.sql.*" %> 
  10. <% 
  11. String comment=request.getParameter("comment"); 
  12. String email=request.getParameter("email"); 
  13. if(comment==null||email==null||comment.trim().equals("")||email.trim().equals("")){ 
  14. out.print("<p>Please write comment</p>"); 
  15. }else{ 
  16. try{ 
  17. Class.forName("oracle.jdbc.driver.OracleDriver"); 
  18. Connection con=DriverManager.getConnection("jdbc:oracle:thin:@localhost:1521:xe","system","oracle"); 
  19. PreparedStatement ps=con.prepareStatement("insert into usercomment(comment1,email) values(?,?)"); 
  20. ps.setString(1,comment); 
  21. ps.setString(2,email); 
  22. int i=ps.executeUpdate(); 

  24. PreparedStatement ps2=con.prepareStatement("select * from usercomment order by id desc");  
  25. ResultSet rs=ps2.executeQuery(); 
  26. out.print("<hr/><h2>Comments:</h2>"); 
  27. while(rs.next()){ 
  28. out.print("<div class='box'>"); 
  29. out.print("<p>"+rs.getString(2)+"</p>"); 
  30. out.print("<p><strong>By: "+rs.getString(3)+"</strong></p>"); 
  31. out.print("</div>"); 
  32. } 
  33. con.close(); 
  34. }catch(Exception e){out.print(e);} 
  35. }//end of else 
  36. %> 
  37. </body> 
  38. </html> 


Output:


See the comment form.