in the preceding article only explains an introduction,
but really what matters is the implementation
is it that we give some examples
found it very interesting to begin to understand better what is jquery
and how to work with her.
we must first have our project with the
js folder in which we find jquery-1.3.1.js this
what we see in the preceding article.
in the same folder create a file to work with javascript
that we do so:
client_getperson create the file and within
introduce the following code:
$ (function () {
$ ("# button") . click (function () {
$ ("# out"). html ($ ("# sel"). val ())}
)
})
parckage souce then create the package model,
where we
People class package model;
public class People {private String
people []
= new String [] {"Joe", "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" %>
\u0026lt;jsp:useBean id="people" scope="request" class="modelo.People"/>
\u0026lt;html>
\u0026lt;head>
\u0026lt;meta http-equiv = "Content-Type" content = "text / html; charset = UTF-8">
\u0026lt;title> Selection with javascript \u0026lt;/ title>
\u0026lt;script type = "text / javascript" src = "js / jquery-1.3.1.js "> \u0026lt;/ script> \u0026lt;script type="text/javascript"
src="js/client_getperson.js"> \u0026lt;/ script>
\u0026lt;/ head>
\u0026lt;body>
\u0026lt;h3> Seleccion Persona \u0026lt;/ h3>
\u0026lt;select id="sel">
\u0026lt;% for (int i = 0; i \u0026lt;people.getNumPeople (); + + i) {%>
\u0026lt;option value ="\u0026lt;%= people.getPerson (i )%>">\u0026lt;%= i%> \u0026lt; ; / option>
\u0026lt;%}%>
\u0026lt;/ select>
\u0026lt;button id="button"> View person \u0026lt;/ button>
\u0026lt;br /> \u0026lt;br />
Selected Person: \u0026lt;span id="out"> \u0026lt;/ span>
\u0026lt;/ body>
\u0026lt; / html>
and so we are left out:
well this is the simplest example, but it otherwise is so more complete.
\u0026lt;% @ page import = "java.util .*"%>
\u0026lt;% @ page import = "modelo.People"%>
\u0026lt;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> \u0026lt;script Type="text/javascript"
src="js/server_getperson.js"> \u0026lt;/ script>
\u0026lt;/ head>
\u0026lt;body>
\u0026lt;h3> AJAX "Get Person" \u0026lt;/ h3>
\u0026lt;select id="sel">
& # 160; \u0026lt;% for (int i = 0; i \u0026lt;people.getNumPeople (); + + i) {%>
\u0026lt;option value ="\u0026lt;%= i% %>">\u0026lt;%= i> \u0026lt;/ option>
& # 160; \u0026lt;%}%>
\u0026lt;/ select>
\u0026lt;button id="button"> search person \u0026lt;/ button>
\u0026lt;br /> \u0026lt;br />
& # 160; person Selected: \u0026lt;span id="out"> \u0026lt;/ span>
\u0026lt;/ body>
\u0026lt;/ html>
on file vestments server_getperson.js type:
$ (function () {
$ ("# button"). click (function () {$
. ajax ({
type: "GET" / / The default
url: "GetPerson"
data: {id: $ ("# sel"). Val ()},
success: function (data) {
$ ("# out"). Html (data )
}})
then we have a servlet called 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;
modelo.People import;
GetPerson
public class 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 ();}
/ /. ....
}
a contribution to java 
0 comments:
Post a Comment