Cual es la mejor forma de pasar los datos de un formulario de la vista al controlador usando ajax (Spring MVC)

[David Martin]

¿Que formas conocéis para pasar los valores de un formulario desde la vista al controlador usando ajax?

Sin utilizar ajax la idea es sencilla, un controlador que devuelve la vista pasando en el modelo un objeto, la vista tiene un formulario que representa este objeto ...cuando hacemos el submit el controlador obtiene ese objeto y persistimos...o lo que sea.

Supongamos que tenemos la siguiente clase:

public class Account {

private Long code;

private String name;

        // getters y setters

}

El controlador recibe la primera petición y devuelve la vista del formulario:

@RequestMapping(value = '/edit', method = RequestMethod.GET)

    public String getCreateForm(Model model) { 

            Account account= new Account();

            model.addAttribute("account",  account);

            return 'form.jsp';

    }

El formulario:

<%@ taglib uri="http://www.springframework.org/tags/form" prefix="form"%>

...

<spring:url value="/save" var="formUrl" />

<form:form modelAttribute="account" method="POST" action="${formUrl}">

<table>

<tr>

<td><form:label path="code">Codigo:</form:label></td>

<td><form:input path="code" id="code"/></td>

</tr>

<tr>

<td><form:label path="name">nombre:</form:label></td>

<td><form:input path="name" id="name"/></td>

</tr>

</table>

<input type="submit" value="Save" />

</form:form>

Finalmente el controlador recibe los valores:

@RequestMapping(value = '/save', method = RequestMethod.POST)

    public String saveAccount(Model model, @Valid Account account, BindingResult result) { 

          System.out.println(account.getCode());

          System.out.println(account.getName());

          //...

    }

La idea es buena, me gusta, es fácil de utilizar ... el código queda muy limpio... 

Ahora vamos con ajax...y esta es mi duda...cual es la mejor forma de hacerlo?

He visto varias formas que stackoferflow resumen muy bien (http://stackoverflow.com/questions/12117799/spring-mvc-ajax-form-post-handling-possible-methods-and-their-pros-and-cons)

1) Se pasa todo en en Path

Vista

function submitForm() {

    var code = jQuery("#code").val();

    var name = jQuery("#name").val();

    jQuery.ajax("/save/Code/" + code + "/Name/"+ name + "/",

    {

        type:"POST"

    });   

}

Controlador

@RequestMapping(value="/save/Code/{code}/Name/{name}/",method=RequestMethod.POST)

 publis void submitForm(@PathVariable String code, @PathVariable String name)

 { 

   //...

 }

2) Se pasa en un JSON

Vista

function submitForm() {

    var name = jQuery("#name").val();

    var active = jQuery("#active").is("checked");

    var object = {name:name,active:active};

    jQuery.ajax("/Save/",

    {

        type:"POST",

        data: object

    });   

}

Controlador

@RequestMapping(value="/save/",method=RequestMethod.POST)

 publis void submitForm(@RequestParam(value="code") String code, @RequestParam(value="name") String name)

 { 

  //...

}

3) se pasa un JSON en el Path 

function submitForm() {

    var code = jQuery("#code").val();

    var name = jQuery("#name").val();

    var object = {code:code,name:name};

    jQuery.ajax("/Submit/" + JSON.stringify(object),

    {

        type:"POST"

    });   

}

@RequestMapping(value="/save/{json}",method=RequestMethod.POST)

 publis void submitForm(@RequestParam(value="code") String code, @RequestParam(value="name") String name)

 { 

    //...

 }

4)  se pasa un json en el RequestBody que mapeamos con una clase

function submitForm() {

    var code = jQuery("#code").val();

    var name = jQuery("#name").val();

    var object = {code:code,name:name};

    jQuery.ajax("/Submit/",

    {

        type:"POST",

        data:JSON.stringify(object)

    });

@RequestMapping(value="/save/",method=RequestMethod.POST)

 publis void submitForm(@RequestBody Account account)

 { 

    //...

 }

5) También he visto el ejemplo de la web de SpringSource (http://blog.springsource.org/2010/01/25/ajax-simplifications-in-spring-3-0/)

$("#account").submit(function() {

var account = $(this).serializeObject();

$.postJSON("account", account, function(data) {

                                    //...

});

return false;

}

@RequestMapping(method=RequestMethod.POST)

public @ResponseBody Map<String, ? extends Object> create(@RequestBody Account account, HttpServletResponse response) {

//...

}

Una vez dicho esto...solo veo la 4 o 5 como mejores formas (aún no he trabajado con ellas)...descartando totalmente las anteriores. 

¿Que formas utilizáis vosotros? Entiendo que deben haber mejores formas de pasar los datos de la vista al controlador.

[Jordi Fernandez]

Una forma realmente sencilla es utilizar jquery-form: http://www.malsup.com/jquery/form/

Esta libería consigue que enviar un formulario via AJAX sea trivial. El formato de envio de datos es el tradicional application/x-www-form-urlencoded. Veo que tus opciones siempre mencionan enviar el formulario en formato JSON ¿hay algún motivo para ello? El hecho de que la llamada sea AJAX no implica que el contenido deba ser JSON.

La liberaría que menciono está preparada para gestionar la respuesta del servidor si ésta viene en formato JSON, además de puntos de callback para insertar todas las maravillas que puedas imaginar.

Jordi.

> --
> Has recibido este mensaje porque estás suscrito al grupo "Barcelona JUG" de Grupos de Google.
> Para anular la suscripción a este grupo y dejar de recibir sus correos electrónicos, envía un correo electrónico a barcelona-ju...@googlegroups.com.
> Para obtener más opciones, visita https://groups.google.com/groups/opt_out.
>
>

[David Martin]

Gracias Jordi !

Pues parece muy interesante este plugin de Jquery, no lo conocía y
creo que me será muy útil...esta noche mismo me pongo a probarlo.

¿Porqué siempre menciono JSON? básicamente porque la mayoría de
ejemplos que he visto los hacen con JSON y porque cuando el formulario
se va complicando, por ejemplo si el Account tiene una lista de
objetos Teléfono... no sé como funcionaria de esta forma, es decir,
como el controlador interpreta lo que le está llegando para crear el
objeto. Probaré también..que si funciona es la leche!!

Con JSON y Jackson podríamos obtener el objeto para trabajar en el
controlador de java.(http://wiki.fasterxml.com/JacksonInFiveMinutes#Full_Data_Binding_.28POJO.29_Example)

Muy buena respuesta Jordi!

David.

El día 7 de marzo de 2013 18:04, Jordi Fernandez
<jo...@fernandez.name> escribió: