Как использовать Ajax JQuery в Spring Web MVC

Ответ 1

Существует несколько способов решить эту проблему. Мне нужно несколько ответов на вопросы, прежде чем я смогу дать вам четкое руководство.

Есть ли у вас предпочтение XML для JSON для запросов ajax?

Одно замечание - нет ничего конкретного jquery, о котором я собираюсь вам сказать. Вам нужно отправить ответ на запрос jquery async в форме, полезной для jquery (желательно XML или json, в идеале), но на стороне сервера она выглядит просто как обычный запрос, который используется для представления представления, которое отображает XML или json вместо html. Мое личное предпочтение - использовать JSON, тем более, что пакет spring -json работает очень хорошо и прост в использовании, как только вы понимаете, как он работает. Я рекомендую пакет spring -json, доступный из http://spring-json.sourceforge.net/ Прочитайте всю документацию, и у вас должна быть очень хорошая идея, как это работает.

В самой базовой форме ваше решение должно выполнить следующее:

Настройте представление, которое использует noe в представлениях spring -json. Я предпочитаю sojoView для большинства случаев.

сделать асинхронный запрос на сервер, который вернет список пользователей. Если единственной информацией, необходимой для доставки набора пользователей, является выбранное значение выпадающего списка, было бы довольно просто просто отправить запрос GET с выбранным доменом в строку запроса. На стороне сервера вам нужен контроллер, который будет сопоставлен с входящим запросом и который отправит обратно json или xml для обработки jquery. В основном вы можете написать полностью нормальный контроллер, независимо от того, был ли он получен методом GET или POST, и добавить список пользователей в модель, прежде чем возвращать имя вашего json-представления. 3 типа json-представления, предоставленные spring -json, передадут beans в ваш список в json-структуру и отправят это клиенту. Вы можете использовать все стандартные функции DataBinder для анализа/преобразования входящих параметров, и любые ошибки проверки будут генерировать полевые или глобальные сообщения об ошибках в ответе json, который ваш клиентский код может предоставить пользователю.

В простейшем случае мой код будет выглядеть примерно так (это все spring 2.5. Он использует аннотации, но вы можете делать то же самое с конфигурацией xml в контексте вашего приложения.):

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

Если я хочу обработать запрос POST, и я хочу загрузить фактический объект Domain из переданного domainValue, я могу сделать что-то вроде этого

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

Для выдачи запроса ajax вы можете использовать модуль jquery ajaxForm. Предполагая, что у вас есть форма с идентификатором "selectDomainForm", вам нужен js, который выглядит примерно так:

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

Вы можете загрузить документацию для модуля ajaxForm, чтобы узнать, как публиковать, а не получать и отправлять захват только определенных полей и отправлять их по URL-адресу, который не является предполагаемым URL-адресом формы.

Чтобы отобразить список пользователей на странице, у вас будет div в вашем коде с идентификатором, подобным "userList", и вы можете перебирать пользователей в возвращаемом json, создавая html для каждого пользователя. Просто добавьте этот html в div "userList" и он появится в браузере.

Ответ 2

Определите контроллер для URL

Если вы хотите использовать метод POST:

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

или, если вы хотите использовать метод GET:

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

Назовите его с помощью функции типа .click или .submit

и это он