pero realmente lo que importa es la implementacion es por
ello que vamos a dar unos ejemplos que encontre muy
interesante para empezar a entender mejor lo que es jquery
y como trabajar con ella.
primero tenemos que tener nuestro proyecto con la
carpeta js en la cual encontramos jquery-1.3.1.js, esto lo
podemos ver en el articulo anterior.
en la misma carpeta creamos un archivo para trabajar
con javascript esto lo hacemos asi:
creamos el archivo client_getperson y dentro de ella introducimos
el siguiente codigo:
$(function() {
$("#button").click(function() {
$("#out").html( $("#sel").val() )
})
})
luego en souce parckage creamos el paquete modelo,
en donde creamos la clase People
package modelo;
public class People {
private String people[]
= new String[] { "jorge", "felipe", "hector", "enzo", "sergio", };
public int getNumPeople() { return people.length; }
public String getPerson(int num) { return people[num]; }
}
ahora en nuestra pagina jsp
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@ page import="java.util.*" %>
<%@ page import="modelo.People" %>
<jsp:useBean id="people" scope="request" class="modelo.People"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Seleccion con javascript</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/client_getperson.js"></script>
</head>
<body>
<h3>Seleccion de Persona</h3>
<select id="sel">
<% for( int i = 0; i < people.getNumPeople(); ++i ) { %>
<option value="<%=people.getPerson(i)%>"><%=i%></option>
<% } %>
</select>
<button id="button">Ver persona</button>
<br /><br />
Persona Seleccionada: <span id="out"></span>
</body>
</html>
y la salida nos queda asi:
bueno este es el ejemplo mas simple, pero el mismo de otra formamas completa es asi.
<%@ page import="java.util.*" %>
<%@ page import="modelo.People" %>
<jsp:useBean id="people" scope="request" class="modelo.People"/>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Selection con ajax</title>
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript" src="js/server_getperson.js"></script>
</head>
<body>
<h3>AJAX " Obtener Persona "</h3>
<select id="sel">
<% for( int i = 0; i < people.getNumPeople(); ++i ) { %>
<option value="<%=i%>"><%=i%></option>
<% } %>
</select>
<button id="button">buscar persona</button>
<br /><br />
persona Seleccionada: <span id="out"></span>
</body>
</html>
en el archivo server_getperson.js temos que escribir :
$(function() {
$("#button").click(function() {
$.ajax( {
type: "GET", // the default
url: "GetPerson",
data: { id: $("#sel").val() },
success: function(data) {
$("#out").html( data )
}
} )
luego tenemos un servlet llamado GetPerson
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import modelo.People;
public class GetPerson extends HttpServlet {
private People people = new People();
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=UTF-8");
PrintWriter out = response.getWriter();
try {
String id = request.getParameter("id");
out.print(people.getPerson(Integer.parseInt(id)));
} finally {
out.close();
}
//.....
}
Entradas
No hay comentarios:
Publicar un comentario