Comentario diseño de la caja de Bootstrap usando AJAX, MySQL y JSP

Aprender: ¿Cómo diseñar caja de comentarios en Bootstrap usando AJAX, MySQL y JSP (Java página Servidor)?
por: Vanka Manikanth, de 02-MAR-2017

Si usted es nuevo en AJAX, entonces lee este mensaje es el primero (AJAX Solicitud de JSP – un ejemplo).

Este es un comentario
diseño de la caja usando AJAX

, por lo que sin ninguna recarga de la página el usuario puede publicar sus comentarios.

index.jsp

Aquí hemos creado la
HttpRequest
objeto y valores que son introducidos por el usuario, enviado a través de la URL
.

<html>
<head>
<title>AJAX REQUEST IN JSP</title>
<script type="text/javascript">
function loadAjax(){
var username= document.getElementById("username").value;
var email= document.getElementById("email").value;
var tel= document.getElementById("tel").value;
var division= document.getElementById("division").value;
var url="ajax.jsp?username="+username +"&email="+email+"&division="+division+"&tel="+tel;
alert(url);
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){
alert("Unable to connect server");
}
}
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=" Request Processed "+text;
}
}
</script>
</head>
<body>
<h1>AJAX REQUEST IN JSP</h1>
<form>
<p><label>YOUR NAME</label>
<input type="text" name="username" id="username" required="required"></p>
<p><label>YOUR EMAIL</label>
<input type="email" name="email" id="email" required="required"></p>
<p><label>YOUR PHONE</label>
<input type="tel" name="tel" id="tel" required="required"></p>
<p><label>YOUR DIVISION</label>
<select name="division" required="required" id="division">
<option value="">Select</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="North">North</option>
<option value="South">South</option>
</select></p>
<button type="button" onclick="loadAjax()">REGISTER</button>
</form>
<p id="print"></p>
</body>
</html>

ajaxRequestPage.jsp

Aquí estamos manejando los parámetros de la petición y empujando a los valores de base de datos, cuanto el
executeUpdate ()
estamos mostrando los valores.

<%@ 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>Insert title here</title>
</head>
<body>
<%
String username=request.getParameter("username");
String email=request.getParameter("email");
String division=request.getParameter("division");
String tel=request.getParameter("tel");
long phone = Long.parseLong(tel);
%>
<h3>USER NAME IS : <%=username %></h3>
<h3>EMAIL ID IS : <%=email %></h3>
<h3>DIVISION IS : <%=division %></h3>
<h3>PHONE NUMBER IS : <%=phone %></h3>
</body>
</html>

Salida:


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *