[SOLUCIONADO] Comunicacion html-jsp con ajax

marodal · #1 (**permalink**) 28/02/2014, 05:48

Hola,

Tengo un html con un formulario con una serie de campos, cuya validacion con base de datos la realiza una pagina jsp. La pagina jsp devuelve un booleano dependiendo si la validacion ha sido correcta o no. La pregunta es: ¿como implemento esto con AJAX?

Mediante javascript realizo la peticion AJAX a la pagina jsp, para que me devuelva el booleano, ¿pero como envia el jsp ese booleano? ¿Como indico en la petición que lo que quiero es esa variable?

Gracias y un saludo

chuidiang · #2 (**permalink**) 28/02/2014, 06:13

Hola:

AJAX envía la petición a una URL (tu jsp) y la URL permite especificar parámetros, por ejemplo, la URL podría ser

getVariable.jsp?name=nombreVariable

El Jsp devolverá la variable como tú quieras devolverla y que tu javascript sea luego capaz de interpretar. Lo más cómodo suele ser devolver texto en formato json, de forma que tu jsp puede devolver true o bien {"nombreVariable":true}. La ventaja de json es que casi es sintaxis javascript y muchas librerías de AJAX saben interpretarlo y te devuelven directamente el valor.

Se bueno.

marodal · #3 (**permalink**) 28/02/2014, 09:33

Entiendo perfectamente lo que hay que hacer desde el lado del cliente, pero no en el lado del servidor.
En el cliente (pagina html): Al pulsar el botón de envío del formulario, y si todos los campos estan completos, realizo una llamada AJAX a la pagina jsp del servidor. Si hay exito en la llamada, proceso los datos que recibiré de la pagina jsp.

El problema viene en el lado del servidor. ¿Como envío yo ese booleano? He implementado un bean que realiza la conexion a la base de datos, y comprueba si hay registros que se corresponden con los campos introducidos en el formulario. Y pongo la variable booleana a true o false en función de esto. Pero, ¿como la envío al cliente? ¿Cómo indico en la peticion ajax que lo que quiero es la variable booleana?

Gracias

chuidiang · #4 (**permalink**) 01/03/2014, 01:49

Lo dicho, devuelves true o el json o lo que quieras.

Código Java:

Ver original<%
    // todo tu codigo de consulta //
    out.println(variableBooleana);
%>

Si devuelves true (o false) en javascript deberías ser capaz de leerla como boolean. Eso sí, todo el JSP únicamente debe devolver un texto true o texto false, sin nada más. Para estas cosas suele ser más habitual usar un servlet en vez de un jsp, aunque te funcionará igual con jsp.

Si usas en javascript alguna librería que te facilite la vida para el AJAX como jQuery, obtendrás el resultado directamente en una variable javascript.

Código Javascript:

Ver original$.getJSON ("tuUrl.jsp?parametro=value", function (resultado) {
    // aqui resultado sera directamente el boolean
}

Si tu jsp devolviera algo como {"variable":true} entonces, en javascript tendrías el boolean en resultado.variable. Te lo comento porque estrictamente hablando enviar un solo true como te he dicho en el primer ejemplo, no es un JSON válido, igual $.getJSON() te protesta. Esta segunda forma funciona seguro.

En JSON la diferencia entre un true y una cadena true es poner ", igual con los números. {"variable":true} es un true, mientras que {"variable":"true"} es un string con contenido "true"

Se bueno.

marodal · #5 (**permalink**) 01/03/2014, 05:44

Estoy usando Jquery para realizar la peticion AJAX.

Código:

$.ajax({
                url:'process.jsp',
                type: 'POST',
                data: 'nombre ='+nombre+'&email ='+email+'&telefono ='+telefono,
                success: function(login){
                    alert(login);
                }
            });

Y el codigo java de mi jsp:

Código:

 <%
       String nombre = objetoBean.getNombre();
       String email = objetoBean.getEmail();
       String telefono = objetoBean.getTelefono();
       boolean login = objetoBean.buscaPersona();
      %>
      
      <%= login %>

Al hacer el alert del login, que es la variable booleana que quiero enviar por Ajax, lo que se muestra es el codigo html completo de la pagina jsp, no estoy consiguiendo devolver solamente la variable booleana.

chuidiang · #6 (**permalink**) 01/03/2014, 05:55

Ese trozo jsp que has puesto, ¿es todo el jsp completo o hay más que no has puesto?. Si quieres devolver solo la variable booleana, deberías poner solo eso que has puesto. Si el jsp tiene más cosas, devolverá más cosas.

Si el caso es el segundo, haz dos jsp, uno para la variable booleana y otro para el resto. Desde ajax llama al que tiene solo la variable boolean.

Se bueno.

marodal · #7 (**permalink**) 01/03/2014, 08:12

El jsp completo es este:

Código:

<!DOCTYPE html>
<%@ page contentType="text/html;charset=windows-1252"%>
<%@ page import = "bean.Manejador" %>
<jsp:useBean id="objetoBean" scope="page" class="bean.Manejador">
    <jsp:setProperty name="objetoBean" property="*" />
</jsp:useBean>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
    </head>
    <body>
      <%
       String nombre = objetoBean.getNombre();
       String email = objetoBean.getEmail();
       String telefono = objetoBean.getTelefono();
       boolean login = objetoBean.buscaPersona();
      %>
      
      <%= login %>
    
    </body>
</html>

Lo unico que quiero devolver es la variable booleana.

Si es correcto, entonces ¿por que no estoy capturando la variable, y si el codigo jsp completo? ¿que es lo que no esta bien en la llamada?

Gracias y saludos

chuidiang · #8 (**permalink**) 01/03/2014, 14:20

Ese jsp está devolviendo muchas cosas, no solo la variable. Devuelve todo lo de <html>, <head>, etc, etc. Como ya te he dicho, si quieres devolver solo la variable, debes devolver SOLO la variable y no todo lo demás. El jsp completo sería algo como esto

Código Java:

Ver original<%@ page import = "bean.Manejador" %>
<jsp:useBean id="objetoBean" scope="page" class="bean.Manejador">
    <jsp:setProperty name="objetoBean" property="*" />
</jsp:useBean>
<%
       String nombre = objetoBean.getNombre();
       String email = objetoBean.getEmail();
       String telefono = objetoBean.getTelefono();
       boolean login = objetoBean.buscaPersona();
%>
<%= login %>

y nada más

Se bueno.

marodal · #9 (**permalink**) 01/03/2014, 19:26

Exacto!! Como tu bien dices, ahora solo devuelvo la variable booleana. Pero ahora tengo el siguiente problema, y es que no consigo validar bien los campos del formulario, siempre devuelvo false.
En el bean que aparece en el codigo, tengo atributos para capturar nombre, email y telefono, pero se estan inicializando a null, y no se el motivo.
He intentado capturar los campos de esta forma tambien:

nombre = request.getParameter("nombre");
...
...
Pero esto tambien inicializa nombre a null.

¿Cual es el error? ¿Estoy mandando bien los campos en la peticion AJAX no?

Muchisimas gracias por tu ayuda.

PD: El bean funciona correctamente si envio los campos del formulario a traves de la etiqueta form con method=post action:"pagina.jsp"

chuidiang · #10 (**permalink**) 02/03/2014, 00:51

Hola:

No estoy seguro, el data que has puesto name=nombre&email=email&telefono=telefono corresponde a un formato GET en la URL y haces la petición como POST, no estoy seguro que eso funcione.

Prueba a hacer la petición tipo GET, o bien si la dejas como POST haz que data sea un objeto javascript así "{ nombre:'nombre', email:'email', telefono:'telefono' }"

Se bueno.

marodal · #11 (**permalink**) 02/03/2014, 04:41

Con GET tampoco funciona.

Este es el codigo de la peticion:

Código:

 $.ajax({
                type: "GET",
                url:"process.jsp",
                data: "nombre ="+nombre+"&email ="+email+"&telefono ="+telefono,
                success: function(login){
                    alert(login);
                }
            });

Las variables nombre, email y telefono son las correctas, pero parece que no llegan o no se capturan en el lado del servidor. No entiendo lo que pasa.

Por otro lado, creo que con POST también se puede usar este tipo de data en la petición Ajax.

Codigo pagina JSP que recibe los parámetros :

Código:

<%@ page import = "bean.Manejador" %>
<jsp:useBean id="objetoBean" scope="page" class="bean.Manejador">
    <jsp:setProperty name="objetoBean" property="*" />
</jsp:useBean>
 <%
       String nombre = objetoBean.getNombre();
       String email = objetoBean.getEmail();
       String telefono = objetoBean.getTelefono();
       /*String nombre = request.getParameter("nombre");
       String email = request.getParameter("email");
       String telefono = request.getParameter("telefono");*/
       boolean login = objetoBean.buscaPersona();
       
       
       
     
 %>
      
      <%= login %>

Ni con el bean, ni con request,getParameter(...). Al depurar este codigo java, las variables se inicializan a null. Tiene que faltar algo.

Muchisimas gracias por tu ayuda

chuidiang · #12 (**permalink**) 02/03/2014, 06:46

Revisa la parte de javascrpit para asegurarte que las variables nombre, email y telefono están bien rellenas. Si todo eso está en un formulario, no basta con apretar el botó para que se metan los valores de los intput en las variables javascript nombre, email y telefono automáticamente, debes acerlo a mano. Pon un alert justo antes de la llamada para ver qué vales eso.

Se bueno.

marodal · #13 (**permalink**) 02/03/2014, 08:55

Si, las variables se inicializan correctamente en el javascript, puesto que lo compruebo debuggeando el código con el navegador.Justo antes de realizar la llamada AJAX, las variables nombre, email y telefono tienen el valor correcto.

El codigo completo de la función javascript que se ejecuta cuando pulso el botón enviar de mi formulario es el siguiente:

Código:

$(document).ready(function(){

    $("#enviar").click(function(){
       
        var nombre = $("#nombre").val();
        var email = $("#email").val();
        var telefono = $("#telefono").val();
        
        if(nombre.length==0){
            $("#nombre").focus();
            
        }
        else if(email.length==0){
            $("#email").focus();
            
        }
        else if(telefono.length==0){
            $("#telefono").focus();
            
        }
        else{
            $.ajax({
                type: "GET",
                url:"process.jsp",
                data: "nombre ="+nombre+"&email ="+email+"&telefono ="+telefono,
                success: function(login){
                    alert(login);
                }
            });
        }
        
        
        });
});

Gracias

chuidiang · #14 (**permalink**) 03/03/2014, 01:45

Prueba a quitar los espacios delante de los =

Si no funciona, solo como prueba, quita los data y en la parte url pon (con GET, por supuest)

url:"process.jsp?nombre=unNombre"

a ver si al menos eso llega.

Se bueno.

marodal · #15 (**permalink**) 04/03/2014, 14:00

Muchisimas gracias, al quitar los espacios funcionó.

El problema ahora es enviar mas de una variable al cliente. Lo estoy intentando con JSON:

Código:

HashMap<String,String> mapa = new HashMap<String,String>();
       mapa.put("login", l);
       mapa.put("nombre", nombre);
       mapa.put("email",email);
       
       JSONObject obj = new JSONObject(mapa);

<%=obj%>

Y en el Javascript:

Código:

success: function(data){
                var json = eval("(" + data + ")");
                var data = json.mapa;
                    if(data.login.equals("exito")){
                       .....
                       ....

Pero al depurar Javascript me aparece el mensaje de que no puedo hacer equals de undefined...

marodal · #16 (**permalink**) 04/03/2014, 15:00

SOLUCIONADO.

Había un error en la forma de crear y enviar el json.

Código:

HashMap<String,String> mapa = new HashMap<String,String>();
       mapa.put("login", l);
       mapa.put("nombre", nombre);
       mapa.put("email",email);
       
       
       
       JSONObject obj = new JSONObject();
       obj.append("datos", mapa);

De esta forma, si parseo de forma correcta luego en el Javascript.

Muchisimas gracias por tu ayuda