2009-11-04 35 views
23

Estoy usando Spring Web MVC para mi aplicación.Cómo usar Ajax JQuery en Spring Web MVC

tengo la lista 1 desplegable en mi JSP View, procedente de petición siguiente llamada 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> 

página JSP tiene:

<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> 

Ahora mi requisito es que, en el evento de cambio de mi lista desplegable, quiero buscar usuarios relacionados del servidor y mostrar esa lista de usuarios en algún cuadro de lista.

Para eso, ¿cómo puedo usar la llamada jQuery AJAX?

¿Dónde debo manejar el código del lado del servidor que recibe la solicitud y busca el usuario relacionado?

¿Cómo mostrar ese conjunto de usuarios que viene en mi JSP?

Respuesta

35

Hay varias formas de solucionar esto. Necesito algunas respuestas a las preguntas antes de poder brindarle una orientación sólida.

¿Tiene preferencia por XML frente a JSON para solicitudes de AJAX?

Una cosa a tener en cuenta: no hay nada específico de jaro sobre lo que voy a decirle que haga. Debe enviar una respuesta a la solicitud asíncrona de jquery en un formato que sea útil para jquery (XML o json, idealmente), pero en el lado del servidor, simplemente se ve como una solicitud normal que utiliza una vista que representa XML. o json en lugar de html. Mi preferencia personal es usar JSON, especialmente porque el paquete Spring-json funciona muy bien y es fácil de usar una vez que comprenda cómo funciona. Recomiendo el paquete Spring-json disponible en http://spring-json.sourceforge.net/ Lea toda la documentación y debería tener una muy buena idea de cómo funciona.

En la forma más básica, la solución tiene que hacer lo siguiente:

Configurar una vista que utiliza NOE de los puntos de vista de primavera-JSON. Prefiero sojoView para la mayoría de los casos.

realiza una solicitud asíncrona al servidor, que devolverá la lista de usuarios. Si la única información necesaria para entregar el conjunto de usuarios es el valor seleccionado del menú desplegable, sería bastante simple emitir una solicitud GET con el dominio seleccionado en la cadena de consulta. En el lado del servidor, necesita un controlador que se asignará a la solicitud entrante y que enviará de vuelta json o xml para ser procesado por jquery. Básicamente puede escribir un controlador totalmente normal, ya sea que lo acceda mediante el método GET o POST, y agregue su lista de usuarios al modelo antes de devolver el nombre de su vista JSON. Los 3 tipos de vista json proporcionados por spring-json convertirán los beans en su lista en una estructura json y lo enviarán al cliente. Puede usar toda la funcionalidad estándar de DataBinder para analizar/convertir los parámetros entrantes y cualquier error de validación generará mensajes de error globales o de campo en la respuesta json que su código del lado del cliente puede presentarle al usuario.

En el caso más simple, mi código se vería así (esto es todo primavera 2.5. Utiliza anotaciones pero puede hacer las mismas cosas con la configuración xml en el contexto de su aplicación.):

@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 quiero procesar a través de una petición POST, y deseo para cargar un objeto de dominio real de la domainValue que se presenta, no puedo hacer somethign como esto

@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"; 
    } 
} 

Para la emisión la solicitud ajax, puede usar el módulo jquery ajaxForm. Asumiendo que tiene un formulario con id "selectDomainForm" necesita js que se ve algo como esto:

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); 

Usted puede buscar en Google la documentación para el módulo ajaxForm con el fin de aprender cómo publicar en lugar de obtener y enviar grab solo ciertos campos y enviarlos a una URL que no es la url prevista del formulario.

Para mostrar la lista de usuarios en la página, tendrá un div en su código con una identificación como "userList" y puede iterar sobre los usuarios en el json devuelto, creando html para cada usuario. Simplemente agregue ese html a la div "userList" y aparecerá en el navegador.

0

Definir el controlador para la URL

Si desea utilizar el método POST:

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

o, si desea utilizar el método GET:

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

Llámalo con una función como .click o .submit

y eso es todo