Saltar al contenido

Fragmentos Spring MVC 3.2 Thymeleaf Ajax

Recabamos por distintos espacios para tenerte la solución a tu dilema, en caso de alguna inquietud puedes dejar la inquietud y contestaremos porque estamos para ayudarte.

Solución:

Aquí hay un enfoque que encontré en una publicación de blog:

No quería usar esos marcos, así que en esta sección estoy usando jQuery para enviar una solicitud AJAX al servidor, esperar la respuesta y actualizar parcialmente la vista (representación de fragmentos).

La forma

Guest list form

Este formulario contiene un texto de entrada con una búsqueda string (buscarApellido) que será enviado al servidor. También hay una región (resultsBlock div) que se actualizará con la respuesta recibida del servidor.

Cuando el usuario haga clic en el botón, se invocará la función retrieveGuests().

function retrieveGuests() 
    var url = '/th-spring-integration/spring/guests';

    if ($('#searchSurname').val() != '') 
        url = url + '/' + $('#searchSurname').val();
    

    $("#resultsBlock").load(url);

La función de carga de jQuery realiza una solicitud al servidor en la URL especificada y coloca el HTML devuelto en el elemento especificado (resultsBlock div).

Si el usuario ingresa una búsqueda string, buscará a todos los invitados con el apellido especificado. De lo contrario, devolverá la lista de invitados completa. Estas dos solicitudes llegarán a las siguientes asignaciones de solicitud de controlador:

@RequestMapping(value = "/guests/surname", method = RequestMethod.GET)
public String showGuestList(Model model, @PathVariable("surname") String surname) 
    model.addAttribute("guests", hotelService.getGuestsList(surname));

    return "results :: resultsList";


@RequestMapping(value = "/guests", method = RequestMethod.GET)
public String showGuestList(Model model) 
    model.addAttribute("guests", hotelService.getGuestsList());

    return "results :: resultsList";

Dado que Spring está integrado con Thymeleaf, ahora podrá devolver fragmentos de HTML. En el ejemplo anterior, el retorno string “resultados :: lista de resultados” se refiere a un fragmento llamado lista de resultados que se encuentra en la página de resultados. Echemos un vistazo a esta página de resultados:








    
Id Surname Name Country
id surname name country

El fragmento, que es una mesa con invitados registrados, se insertará en el bloque de resultados.

Solo renderizado Thymeleaf fragments también funciona bien con ModelAndView.

tu controlador

@RequestMapping(value = "/feeds", method = RequestMethod.GET)
public ModelAndView getFeeds() 
    LOGGER.debug("Feeds method called..");
    return new ModelAndView("feeds :: resultsList");

tu vista






    
A test fragment
A test fragment

Lo que realmente se representa

A test fragment
A test fragment

Como una versión alternativa a la gran respuesta de Sohail, quiero dar una versión en la que el uso de javascript puede enviar todo el objeto th: al controlador, integrando Thymeleaf en sus formularios, sin tener que usar @PathVariable, que se vuelve desordenado o no se puede utilizar en absoluto cuando tienes formularios con muchos campos.

Para el formulario (usando un ejemplo que devuelve un objeto que tiene una identificación y un nombre Cadenas, y alimenta un cuadro combinado con un Mapa que tiene algunos de esos objetos como valores) tenemos:

Name:

Cuando se envía este formulario (utilizando un botón con el tipo de envío, por ejemplo), se reemplazará todo el documento. Sin embargo, podemos interceptar este envío con javascript y hacerlo de la manera ajax. Para lograr esto, agregaremos un interceptor a nuestro formulario usando una función. Primero llame a la función que agrega el interceptor justo después del formulario:


Y la función se ve así (colócala en el encabezado del documento o donde se adapte a tus necesidades):


Ahora, cada vez que se envíe el formulario, esta función se activará y:

  • Impedir que se envíe el formulario original
  • Haz una llamada ajax usando la url definida en el formulario th:action
  • Serialice los datos del formulario. Su controlador podrá recibir esto en un objeto
  • Reemplace la parte de su código html con el fragmento devuelto

La pieza reemplazada debería verse así

Y el controlador puede recibir el th:object en el formulario, con sus valores completos, así (Reemplace Object con el tipo de su objeto y “object” con un nombre propio):

@PostMapping(value = /yourMapping)
public String ajaxCtrlExample(@ModelAttribute("object") Object object, Model model) 
    return yourFragmentPath;

Y eso es todo Llame a la función que agrega el interceptor después de cada formulario que necesita en la versión ajax.

¡Haz clic para puntuar esta entrada!
(Votos: 4 Promedio: 4.8)



Utiliza Nuestro Buscador

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *