Comment Box design in Bootstrap using AJAX, MYSQL and JSP

Learn: How to design comment box in Bootstrap using AJAX, MYSQL and JSP (Java Server Page)?
By: Vanka Manikanth, on 02 MAR 2017

If you are new to AJAX, then read this post first (AJAX Request in JSP - An Example).

This is a Comment Box Design using AJAX, so without any reloading of the page the user can post their comment.

Index.jsp

Here we have created the HttpRequest object and values which are input by the user, sent via the URL.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
		<title>AJAX WITH JSP</title>
		<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div class="container-fluid">
			<div class="panel-primary">
				<div class="panel-heading">
					<h1 class="panel-title">COMMENT BOX USING AJAX THROUGH JSP</h1>
				</div>
				<div class="panel-body">
					<div class="form-group col-md-4">
						<label>YOUR NAME</label>
						<input class ="form-control" type="text" id="username">
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-4">
						<label>YOUR EMAIL</label>
						<input class ="form-control" type="email" name="email" id="email" required="required">
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-4">
						<label>TOPIC</label>
						<select name="topic" id="topic" class ="form-control" required="required">
							<option value="">Select</option>
							<option value="Programming Languages">Programming Languages</option>
							<option value="Articles">Articles</option>
							<option value="CodeSnippets">CodeSnippets</option>
							<option value="Others">Others</option>
						</select>
					</div>
					<div class="clearfix"></div>

					<div class="form-group col-md-4">
						<label>YOUR COMMENT</label>
						<textarea class="form-control" rows="8" id="comment" required="required"></textarea>
					</div>
					<div class="clearfix"></div>
					<div class="form-group col-md-6">
						<button class="btn btn-primary" type="button" onclick="loadAjax()">POST</button>
					</div>
				</div>
			</div>
			<p id="print"></p>
		</div>
		<script src="js/jquery.min.js"></script>
		<script src="js/bootstrap.js"></script>
		<script type="text/javascript">

		function loadAjax(){
			var username= document.getElementById("username").value;
			var email= document.getElementById("email").value;
			var topic= document.getElementById("topic").value;
			var comment= document.getElementById("comment").value;
			if(username.trim() =="" || email.trim()=="" || topic.trim() =="" || comment.trim()==""){
			alert("All fields are Required");
			return false;
			}

			
			var url="ajaxrequestPage.jsp?username="+username +"&email="+email+"&topic="+topic +"&comment="+comment;



			if(window.XMLHttpRequest){
				
				request = new XMLHttpRequest();
				
			}else if(window.ActiveXObject){
				
				request = new ActiveXObject("Microsoft.XMLHTTP");
			}			
			try{
				request.onreadystatechange=sendInfo;
				request.open("POST",url,true);
				request.send();
				
			}catch(e){
			document.write(e);
			}			
		}

		function sendInfo(){
			var p =		document.getElementById("print");

			if(request.readyState ==1){
				var text = request.responseText;
				p.innerHTML="Please Wait...";
				console.log("1");
			}

			if(request.readyState ==2){
				var text = request.responseText;
				console.log("2");				
			}
			if(request.readyState ==3){
				var text = request.responseText;
				console.log("3");				
			}
			if(request.readyState ==4){
				var text = request.responseText;
				p.innerHTML=" Your Comment has been Posted  "+text;
			}
		}
		</script>
	</body>
</html>

ajaxRequestPage.jsp

Here we are handling the request parameters and pushing the values to database, soon as the executeUpdate() we are displaying the values.

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1" import ="java.sql.*"%>
<!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>AJAX REQUEST</title>
	<link rel="stylesheet" href="css/bootstrap.css">
	</head>
	<body>
		<div class="container-fluid">
			<%
				String username =request.getParameter("username");
				String email =request.getParameter("email");
				String topic =request.getParameter("topic");
				String comment =request.getParameter("comment");
			%>
			<div class="panel-primary">
				<div class="panel-heading">
					<h4 class="panel-title">COMMENTS</h4>
				</div>
				<div class="panel-body">
					<%
					String message="";
					try {			
						Class.forName("com.mysql.jdbc.Driver");
						Connection con=DriverManager.getConnection("jdbc:mysql://localhost:3306/MYDB","root","new_password");	
						PreparedStatement ps = con.prepareStatement("INSERT INTO USERDETAILS VALUES(?,?,?,?);");
						ps.setString(1, username);
						ps.setString(2, email);
						ps.setString(3, topic);
						ps.setString(4, comment);
						ps.executeUpdate();
						%>
						<strong><big>USER NAME IS : <%=username %><br>
						EMAIL IS : <%=email %><br>
						ON TOPIC :<%=topic %><br>
						YOUR COMMENT :<%=comment %>
						</strong>
						<%con.close();
					}catch (Exception e) {
						System.out.println(e);		
					}
					%>
				</div>
			</div>
		</div>
		<script src="js/jquery-3.1.1.min.js"></script>
		<script src="js/bootstrap.js"></script>
	</body>
</html>

Output:

comment box code using ajax, mysql and jsp

Comments and Discussions!

Load comments ↻

Top MCQs

Top Programs/Examples