2009-11-04 3 views
23

J'utilise Spring Web MVC pour mon application.Comment utiliser Ajax JQuery dans Spring Web MVC

Je 1 liste déroulante dans ma JSP Voir, en provenance de la demande suivante appelée savegroup.htm

<bean name="/savegroup.htm" class="com.sufalam.mailserver.presentation.web.GroupSaveController"> 
    <property name="sessionForm" value="true"/> 
    <property name="commandName" value="Group"/> 
    <property name="commandClass" value="com.sufalam.mailserver.presentation.bean.GroupViewBean"/> 
    <property name="formView" value="common"/> 
    <property name="successView" value="managegroup.htm"/> 
    <property name="userSecurityProcessor" ref="IUserSecurityProcessor"/> 
    <property name="domainsSecurityProcessor" ref="IDomainsSecurityProcessor"/> 
    <property name="forwardingsSecurityProcessor" ref="IForwardingsSecurityProcessor"/> 
</bean> 

page JSP a:

<form:form name="groupSaveForm" action="savegroup.htm" commandName="Group" method="POST"> 
    Group Name : 
    <form:input path="source"/><br><br> 
    Domain List : 
    <form:select id="domains" onchange="javascript:getUser();" path="domainsList" multiple="false" size="1"> 
     <form:option value="-" label="--Select--"/> 
     <form:options items="${domainsList}" itemValue="domain" itemLabel="domain"/> 
    </form:select> 
</form:form> 

Maintenant, mon exigence est que, sur l'événement de changement de mon liste déroulante, je veux récupérer les utilisateurs liés du serveur et afficher cette liste d'utilisateurs dans une zone de liste.

Pour cela comment puis-je utiliser jQuery AJAX appel?

Où dois-je gérer le code côté serveur qui reçoit la requête et récupère l'utilisateur associé? Comment afficher ce nouvel ensemble d'utilisateurs dans ma JSP?

Répondre

35

Il y a plusieurs façons de résoudre ce problème. J'ai besoin de quelques réponses aux questions avant de pouvoir vous donner des conseils solides.

Avez-vous une préférence pour XML vs JSON pour les requêtes ajax? Une chose à noter - il n'y a rien de précis sur ce que je vais vous dire de faire. Vous devez renvoyer une réponse à la requête asynchrone jquery sous une forme utile à jquery (XML ou json, idéalement), mais côté serveur, cela ressemble à une requête normale qui utilise une vue qui rend XML ou json au lieu de html. Ma préférence personnelle est d'utiliser JSON, d'autant plus que le paquet spring-json fonctionne très bien et est facile à utiliser une fois que vous avez compris comment cela fonctionne. Je recommande le paquet spring-json disponible à partir de http://spring-json.sourceforge.net/ Lisez toute la documentation et vous devriez avoir une très bonne idée de comment cela fonctionne.

Dans la forme la plus basique, votre solution doit faire ce qui suit:

Configurer une vue qui utilise noe des vues printemps-JSON. Je préfère sojoView pour la plupart des cas.

faire une requête asynchrone au serveur, ce qui renverra la liste des utilisateurs. Si la seule information nécessaire pour fournir l'ensemble des utilisateurs est la valeur sélectionnée de la liste déroulante, il serait assez simple d'émettre une requête GET avec le domaine sélectionné dans la chaîne de requête. Du côté serveur, vous avez besoin d'un contrôleur qui sera mappé à la requête entrante et qui enverra json ou xml pour être traité par jquery. Fondamentalement, vous pouvez écrire un contrôleur totalement normal, qu'il soit accédé par la méthode GET ou POST, et ajouter votre liste d'utilisateurs au modèle avant de retourner le nom de votre vue json. Les 3 types de vue json fournis par spring-json rendront les beans de votre liste dans une structure json et l'enverront au client. Vous pouvez utiliser toutes les fonctionnalités DataBinder standard pour analyser/convertir les paramètres entrants et toute erreur de validation générera des messages d'erreur de champ ou globaux dans la réponse json que votre code côté client peut présenter à l'utilisateur.

Dans le cas le plus simple, mon code ressemblerait à ceci (tout est ressort 2.5.) Il utilise des annotations mais vous pouvez faire la même chose avec la configuration xml dans le contexte de votre application.):

@Controller 
public class AjaxController { 

    @RequestMapping("/some/path/selectDomain.json", method=RequestMethod.GET) 
    public ModelAndView processDomainSelection(@RequestParam(value="domain", required="true") String selectedDomain) { 
     List<User> users = service.loadUsersForDomain(selectedDomain); 
     ModelAndView mv = new ModelAndView("sojoView", "users", users); 
     return mv; 
    } 
} 

Si je veux traiter via une requête POST, et je souhaite charger un véritable objet Domaine du domainValue qui est soumis, je peux faire somethign comme ça

@Controller 
@RequestMapping("/some/path/selectDomain.json") 
public class SelectDomainController { 
    public class FormBean { 
     protected Domain domain; 
     public Domain getDomain() { 
      return domain; 
     } 
     public void setDomain(Domain domain) { 
      this.domain = domain; 
     } 
    } 

    @ModelAttribute("command") 
    public FormBean getCommand() { 
     return new FormBean(); 
    } 

    @InitBinder 
    public void initBinder(WebDataBinder binder, WebRequest request) { 
     // this custom editor knows how to load a Domain object from the domainValue string 
     // if it fails to convert, it can throw an exception, which will result in 
     // an error being logged against the "domain" field 
     binder.registerCustomEditor(Domain.class, "domain", new DomainLookupEditor(domainService)); 
    } 

    @RequestMapping(method=RequestMethod.POST) 
    public String selectedDomain(@ModelAttribute("command") FormBean command, 
             BindingResult result, 
             Model model, 
             HttpServletRequest request) { 
     if (result.hasErrors()) { 
      return "sojoView"; 
     } 
     Domain domain = command.getDomain(); 
     List<User> users = domain.getUsers(); 
     model.addAttribute("users", users); 
     return "sojoView"; 
    } 
} 

Pour l'émission la requête ajax, vous pouvez utiliser le module jquery ajaxForm. En supposant que vous avez un formulaire avec id « selectDomainForm » vous avez besoin js qui ressemble à ceci:

function selectDomainSuccessHandler(json) { 
    // it is possible to send back a 200 response after failing to process the request, 
    // in which case, the sojoView will have set success=false in the json 
    if (json.success == true) { 
     // parse json here and render it into html in your document 
    } else { 
     // get field error and global error from json and present to user 
    } 
} 

function(selectDomainErrorHandler(xhr, returnCode) { 
    // do something based on the return code 
} 

var options = { 
    success: selectDomainSuccessHandler, 
    error: selectDomainErrorHandler, 
    dataType: 'json' 
}; 

$('selectDomainForm').ajaxForm(options); 

Vous pouvez google la documentation pour le module ajaxForm afin d'apprendre à afficher au lieu de se et d'envoyer grab seulement certains champs et les envoyer à une URL qui n'est pas l'URL prévue du formulaire.

Pour afficher la liste des utilisateurs dans la page, vous aurez une div dans votre code avec un id comme "userList" et vous pouvez parcourir les utilisateurs dans le json retourné, en créant html pour chaque utilisateur. Ajoutez simplement ce html à la div "userList" et il apparaîtra dans le navigateur.

0

Définir le contrôleur pour l'URL

Si vous souhaitez utiliser la méthode POST:

content.load('URL(.)or(#)sectionToLoad', {}, function(event) { 
... 
}); 

ou, si vous voulez utiliser la méthode GET:

content.load('URL(.)or(#)sectionToLoad', function(event) { 
... 
}); 

Appelez- avec une fonction comme .click ou .submit

et c'est