segundo ejemplo de jquery con jsp

el siguiente ejemplo utilizaremos jsp con jdbc , hoja de estilo,
se trata de ir capturando un texto, guardarlo y rescatarlo, para
despues mostrarlo en secuencia hacia abajo

insert.jsp


<%@page contentType="text/html"%>

<%@page pageEncoding="UTF-8"%>

<%@ page language="java" import="java.sql.*" errorPage="" %>

<script type="text/javascript" src="js/jquery-1.3.1.js">

</script>

<link rel="stylesheet" href="code.css" type="text/css" media="all" />

<script type="text/javascript" >

$(function() {

$(".update_button").click(function() {

var boxval = $("#content").val();

var dataString = 'content='+ boxval;

if(boxval=='')
{
alert("introduzca texto");

}else

{
$.ajax({

type: "POST",
url: "demo.jsp",
data: dataString,
cache: false,
success: function(html){

$("ol#update").prepend(html);
$("ol#update li:first").slideDown("slow");
$("#content").value('');
$("#content").focus(); $("#flash").hide();
}
});

} return false;
});
});

</script>
<div>
<form method="post" name="form" action="">
<h3>ingrese Comuna</h3>
<textarea cols="30" rows="2" name="content" id="content" maxlength="145" >
</textarea><br />
<input type="submit" value="Ingresar" name="submit" class="update_button"/>
</form>
</div>
<div id="flash"></div>
<ol id="update" class="timeline">
</ol>

demo.jsp


<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@ page language="java" import="java.sql.*" errorPage="" %>
<%

String content=request.getParameter("content");
try{
Class.forName("org.postgresql.Driver");
Connection con =
DriverManager.getConnection
("jdbc:postgresql://localhost/ejemplo","postgres","1234");
Statement st = con.createStatement();
int i=st.executeUpdate
("insert into comuna(nombre) values('"+content+"')");

ResultSet rs=st.executeQuery
("select * from comuna order by nombre desc");

if(rs.next())
{
while(rs.next())
{
String msg=rs.getString("nombre");
%>
<li>
<div align="left">
<span ><%= msg %> </span>
</div>
</li>
<%
}
}else{

out.println("error");}
}
catch(Exception e){

Exception ex = e;
out.println("error de conexion con postgres:"+ex);
}
%>

la base de dato es una tabla sencilla llamada comuna,
con un campo llamado nombre y nada mas.

ahora creamos la hoja de estilo en
netbeans lo podemos crear en nuevo, web ,
cascading style sheet.

root {
display: block;
}

*{margin:0;padding:0;}
ol.timeline{
list-style:none;font-size:0.8em;
}

ol.timeline li{
display:none;position:relative;
padding:.7em 0 .6em 0;
border-bottom:1px dashed #000;
line-height:0.8em;
background-color:#D3E7F5;
height:25px}

ol.timeline li:first-child{
border-top:1px dashed #000;}


encontre estos ejemplos muy intersantes tambien como son:

auto llenado de un text con java link
para entrar mas en detalle tenemos este otro link,
ademas este ejemplo el cual es un combo dependiente con jsp y
ajax link y por ultimo para entrar mas endetalle de jquery link