Comment rendre une vue en utilisant AJAX dans Spring MVC

J'utilise Spring MVC et j'ai besoin de faire un appel asynchrone au serveur et d'actualiser seulement une partie de la page.

Ce que j'ai en fait est un contrôleur qui renvoie une chaîne. J'appelle le contrôleur en utilisant JQuery (.fonction post () ).

Le problème avec ma solution est que je ne suis pas capable de rendre un JSP comme je le fais quand j'utilise ModelAndView comme type de retour.

Existe-t-il un moyen de retourner une vue déjà rendue?

Merci avance.

Neuquino

26
demandé sur Neuquino 2011-01-27 15:05:41

2 réponses

Vous pouvez mettre ce morceau de page dans un JSP séparé et renvoyer un ModelAndView pointant vers celui-ci à partir de votre méthode. Il n'y a pas de différence entre les appels AJAX et non-AJAX à partir de ce point.

16
répondu axtavt 2011-01-27 13:58:19

Cette réponse est juste de confirmer que la réponse par axtavt œuvres. Il m'a fallu une minute pour réaliser ce qu'il suggérait, alors j'ai pensé poster un extrait de code pour aider quiconque venant derrière moi. Bravo à lui, si! :)


MyController.java

@Controller
public class MyController {

    @RequestMapping( method=RequestMethod.GET, value="/mainView" )
    public ModelAndView getMainView( ... ) {        
        /* do all your normal stuff here to build your primary NON-ajax view
         * in the same way you always do
         */             
    }

    /* this is the conroller's part of the magic; I'm just using a simple GET but you
     * could just as easily do a POST here, obviously
     */
    @RequestMapping( method=RequestMethod.GET, value="/subView" )
    public ModelAndView getSubView( Model model ) {
        model.addAttribute( "user", "Joe Dirt" );
        model.addAttribute( "time", new Date() );
        return new ModelAndView( "subView" );
    }

}


MainView.jsp

(...)

<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
    function doAjaxPost() {

        $.ajax({
            type: "GET",
            url: "subView",
            success: function(response) {
                $("#subViewDiv").html( response );
            }
        });
    }
</script>
<input type="button" value="GO!" onclick="doAjaxPost();" />
<div id="subViewDiv"></div>

(...)


Sous-vue.jsp

(...)

<h3>
    User Access Details
</h3>

<p>
    ${user} accessed the system on ${time}
</p>

(...)


Et c'est tout! Une chose de beauté; jusqu'à présent, faire AJAX au printemps a été une énorme douleur... analyser big @ ResponseBody, construire d'énormes ensembles de HTML en concaténant des choses dans JS... ugh... Je ne peux pas croire à quel point cette approche est simple et géniale-et je n'en étais pas au courant jusqu'à maintenant! :)

57
répondu Bane 2017-03-16 14:31:22