Home » Java programming language

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

comment box code using ajax, mysql and jsp






Was this page helpful? YES NO

Are you a blogger? Join our Blogging forum.



Comments and Discussions


We are using Google to publish ads on our website; Google has its own privacy policies. They may save log, cookies on your system. Google may also collect information of your system like IP address, region, city, country. For more details please go through the Google’s privacy policy.