使用AJAX，MYSQL和JSP在Bootstrap中进行注释框设计
如果您不熟悉AJAX，请先阅读此文章（JSP中的AJAX请求-示例）。
这是使用AJAX的评论框设计，因此用户无需重新加载页面即可发表评论。
Index.jsp
在这里，我们创建了HttpRequest对象和由用户输入并通过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>
<div>
<div>
<h1>COMMENT BOX USING AJAX THROUGH JSP</h1>
</div>
<div>
<div>
<label>YOUR NAME</label>
<input class ="form-control" type="text" id="username">
</div>
<div></div>
<div>
<label>YOUR EMAIL</label>
<input class ="form-control" type="email" name="email" id="email" required="required">
</div>
<div></div>
<div>
<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></div>
<div>
<label>YOUR COMMENT</label>
<textarea rows="8" id="comment" required="required"></textarea>
</div>
<div></div>
<div>
<button 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>