Envío de parámetros por Post y lectura de respuesta JSON con JQuery

En este ejemplo se muestra cómo se puede utilizar JQuery para realizar una llamada sencilla de tipo AJAX a una acción de Struts2, que recoge los parámetros de la llamada y devuelve esos mismos parámetros en formato JSON, haciendo una lectura posterior con Javascript.

Por lo tanto hay 2 partes en la arquitectura: un servidor con Struts2 que recibe la petición y un cliente en Javascript que reliza la petición y recibe la respuesta, ayudado de las librerías de JQuery.

En primer lugar se crea una página Web con un formulario, que será el que se utilice para la introducción de la información que se va a enviar al servidor

<form>
	<label for="entrada">Pon lo que quieras:</label>
	<a href="#" id="envioPeticion">Envía la petición</a>
</form>

Como se puede ver, se usará un enlace para desencadenar la acción. Este enlace tiene como id “envioPeticion”.

La cabecera de la página Web, tendrá el correspondiente código de Javascript, usando la librería JQuery

$(document).ready(function() {
	//Petición AJAX, que envía dos parámetros y recibe la respuesta con JSON
	$("#envioPeticion").click(function(e){
		e.preventDefault();
		$.post("../jqueryRate.action", {param1:$("#entrada").val(),param2:$("#entrada").val()+"-dos"} ,
                   function(response){
                        var i = 0;
                        var textoSalida = "";

                        for (i=0;i&lt;response.length;i++)
                        {
                            textoSalida = textoSalida + response[i].nombre + &quot; - &quot; + response[i].edad;
                            textoSalida = textoSalida + &quot;<br />";
                        }
                        alert(textoSalida);
                        $("#vueltaServidor").html(textoSalida);    //Pega lo recibido en el div
                    }, "json");
	});
});

La clave está en la instrucción post de JQuery, que envía los parámetros indicados a la URL, en este caso jqueryRate.action. Existen dos parámetros, el primero de ellos es el texto que el usuario ha introducido y el segundo es el mismo pero añadiendo la cadena “-dos” para utilizar de ejemplo. Obsérvese el formato de los parámetros. Esta información pasará por POST a la petición de la URL indicada.

$.post("../jqueryRate.action", {param1:$("#entrada").val(),param2:$("#entrada").val()+"-dos"} ,

El código del lado del servidor es sencillo: está preparado para recibir la petición por POST con Struts2. Para flexibilizar el ejemplo no se esperan dos atributos en los que se cargan los valores de los parámetros, ya que auque figuran con nombres “param1″ y “param2″ la acción está preparada para cualquier parámetro, de ahí que se lea directamente del objeto Request. De otro modo, si los parámetros son constantes, se podrían haber hecho sendos atributos en la clase con sus getters y setters para que el interceptor inyectara los valores.

El objetivo de la acción es recibir estos dos parámetros en formato estándar para un pos y devolverlos en formato JSON, sin hacer uso de ninguna librería para su transformación (esto lo dejamos para otro post).

La acción implementa ServletRequestAware, ServletResponseAware para tener acceso a los objetos request y response y poder recibir los valores y escribir en la salida. No tiene vista, puesto que necesitamos escribir como respuesta una cadena de texto en formato JSON, no una página JSP, Velocity o HTML. Esa cadena de texto será la que reciba el cliente de Javascript.

import com.opensymphony.xwork2.ActionSupport;
import java.util.Enumeration;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.struts2.interceptor.ServletRequestAware;
import org.apache.struts2.interceptor.ServletResponseAware;

public class jqueryRate extends ActionSupport implements
        ServletRequestAware, ServletResponseAware {

    private HttpServletRequest request;
    private HttpServletResponse response;
    private ServletOutputStream sos;

    public jqueryRate() {
    }

    public String execute() throws Exception {

        sos = response.getOutputStream();

        Enumeration enumeration = request.getParameterNames();
        String parametro;

        StringBuilder salida = new StringBuilder();

         //Escritura en formato JSON del array
        int contador = 0;
        while (enumeration.hasMoreElements()) {
            contador++;
            parametro = enumeration.nextElement();
            salida.append("{\"Parametro\":\"" + parametro + "\",\"Valor\":\"" + request.getParameter(parametro).toString() + "\"},");
         }
        //Quita la coma final
        salida.deleteCharAt(salida.length() - 1);

        if (contador &gt; 1) {
            salida.insert(0, "[");
            salida.append("]");
        }

        //Imprime el resultado
        sos.print(salida.toString());

        return null;    //Devuelve NULL para no tener vista

    }

    public void setServletRequest(HttpServletRequest hsr) {
        this.request = hsr;
    }

    public void setServletResponse(HttpServletResponse hsr) {
        this.response = hsr;
    }
}

La salida de esta acción no tendrá una vista como todas las acciones (de ahí que el return del execute sea null), sino que escribe un texto plano de vuelta que estará en formato JSON. En este caso se trata de los parámetros de la llamada, cualesquiera que sea su número. En este caso son dos:

[{"Parametro":"param2","Valor":"pepe-dos"},{"Parametro":"param1","Valor":"pepe"}]

Esta cadena de texto es leída como parámetro de la función de post de JQuery.

Existen dos modos de tratar la respueta de JSON

  • Mediante la función eval se convierte este objeto en formato JSON a objetos de Javascript. MEdiante su manipulación con el lenguaje Javascript y JQuery se pintan en una capa cuyo id es “vueltaServidor”
  • O mediante el último parámetro del $.post, es decir “json”, de modo que ya se encargan JQuery de dar en “response” un objeto de Javascript, fruto del parsing que ha hecho a la cadena de respuesta. Este método es más seguro y eficiente, por lo que se recomienda su uso.
  •   function(response){
    
    	alert(response.length);
    	var i = 0;
    	var textoSalida = "";
    
    	for (i=0;i&lt;response.length;i++)
    	{
    		textoSalida = textoSalida + response[i].Parametro + &quot; - &quot; + response[i].Valor;
    		textoSalida = textoSalida + &quot;<br />";
    	}
    	alert(textoSalida);
    	$("#vueltaServidor").html(textoSalida);    //Pega lo recibido en el div
    }, "json");
    

    Capa en la que se pinta la cadena de texto textoSalida:

    <div id = "vueltaServidor"></div>

    Resumiendo: hemos hecho una llamada a una acción de Struts2 mediante JQuery y su función POST de AJAX, adjuntando mediante POST dos parámetros estándar (no JSON), uno escrito en una caja de texto y otro derivado de éste por fines didácticos. La acción ha recuperado estos parámetros y los ha devuelto en formato JSON, que mediante eval de Javascript hemos transformado en un array de objetos y se han pintado en una capa DIV. Todo ello haciendo uso de la funcionalidad de llamadas asíncronas de AJAX.

    About these ads

2 comments

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s