Статьи

Ajax с Spring MVC 3 с использованием аннотаций и JQuery

Апрель 5, 2019
Мне всегда было весело работать с Ajax! Не так ли ? Я облегчу вам использование Ajax с Spring MVC 3 и JQuery. Этот пост покажет вам, как использовать Ajax в реальной практике промышленного кодирования. Как обычно, мы возьмем практический пример Ajax в среде Spring MVC 3 и реализуем его, а я облегчу реализацию, чтобы вы поняли тему.

Давайте посмотрим, что является требованием нашего примера и как средство Spring MVC 3 Ajax выполнит его:
В нашем примере мы составим список студентов с именем и высшим уровнем образования, чтобы отправить этот список в офис по трудоустройству, чтобы студенты могли получить шанс. Мы предоставим студенту онлайн-форму «Добавить студенческую форму», чтобы он мог отправить свое имя онлайн и зарегистрироваться. Как многие студенты будут использовать систему, так и производительность системы может быть очень низкой. Для повышения производительности веб-приложения мы будем использовать Ajax с Spring MVC 3 Framework и JQuery.
Для реализации нашего примера мы должны пройти следующие шаги:

  1. Прежде всего, мы создадим класс домена (User.java), который будет содержать ценность информации об ученике.
  2. После этого мы создадим наш класс контроллера (UserListController.java) для обработки HTTP-запроса. Наш контроллер будет обрабатывать три типа запросов. Во-первых, чтобы показать «Добавить форму студента», во-вторых, чтобы обработать запрос Ajax, пришли из «Добавить форму студента» и добавить студентов в список, в-третьих, чтобы показать информацию о студентах в виде списка.
  3. Затем мы создадим страницу jsp (AddUser.jsp) для отображения «Добавить форму студента», которая будет использовать JQuery для отправки запроса Ajax в Spring MVC Controller. JSP также подтвердит пользователю, что студент был добавлен в список.
  4. Затем мы создадим jsp (ShowUsers.jsp), который будет перечислять всех пользователей в списке.

User.java
User.java имеет два свойства name и образования для хранения информации об ученике. Ниже приведен код User.java:

Example Code Sample
1
2
3
4
5
6
7
8
package com.raistudies.domain;
 
public class User {
 
    private String name = null;
    private String education = null;
    // Getter and Setter are omitted for making the code short
}

UserListController.java
Контроллеры имеют три метода для обработки трех URL запросов. Метод showForm обрабатывает запрос на показ формы пользователю. Ниже показан код UserListController.java:

Example Code Sample
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
package com.raistudies.controllers;
 
import java.util.ArrayList;
import java.util.List;
 
import org.springframework.stereotype.Controller;
import org.springframework.ui.ModelMap;
import org.springframework.validation.BindingResult;
import org.springframework.web.bind.annotation.ModelAttribute;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;
 
import com.raistudies.domain.User;
 
@Controller
public class UserListController {
    private List<User> userList = new ArrayList<User>();
 
    @RequestMapping(value="/AddUser.htm",method=RequestMethod.GET)
    public String showForm(){
        return "AddUser";
    }
 
    @RequestMapping(value="/AddUser.htm",method=RequestMethod.POST)
    public @ResponseBody String addUser(@ModelAttribute(value="user") User user, BindingResult result ){
        String returnText;
        if(!result.hasErrors()){
            userList.add(user);
            returnText = "User has been added to the list. Total number of users are " + userList.size();
        }else{
            returnText = "Sorry, an error has occur. User has not been added to list.";
        }
        return returnText;
    }
 
    @RequestMapping(value="/ShowUsers.htm")
    public String showUsers(ModelMap model){
        model.addAttribute("Users", userList);
        return "ShowUsers";
    }
}

«AddUsers» аналогичен методу контроллера, который обрабатывает форму, ожидая, что он также содержит аннотацию @ResponseBody , которая сообщает Spring MVC, что строка, возвращаемая методом, является ответом на запрос, ей не нужно искать представление для этой строки. Таким образом, возвращающая строка будет отправлена ​​обратно в браузер как ответ, и, следовательно, будет работать запрос Ajax. Метод showUsers используется для отображения пользователю списка студентов.
AddUser.jsp
AddUser.jsp содержит простую форму для сбора информации об ученике и использует JQerey JavaScript Framework для генерации Ajax-запроса к серверу. Ниже приведен код в AddUser.jsp:

Example Code Sample
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Add Users using ajax</title>
        <script src="/AjaxWithSpringMVC2Annotations/js/jquery.js"></script>
        <script type="text/javascript">
        function doAjaxPost() {
        // get the form values
        var name = $('#name').val();
        var education = $('#education').val();
 
        $.ajax({
        type: "POST",
        url: "/AjaxWithSpringMVC2Annotations/AddUser.htm",
        data: "name=" + name + "&education=" + education,
        success: function(response){
        // we have the response
        $('#info').html(response);
        $('#name').val('');
        $('#education').val('');
        },
        error: function(e){
        alert('Error: ' + e);
        }
        });
        }
        </script>
    </head>
    <body>
        <h1>Add Users using Ajax ........</h1>
        <table>
            <tr><td>Enter your name : </td><td> <input type="text" id="name"><br/></td></tr>
            <tr><td>Education : </td><td> <input type="text" id="education"><br/></td></tr>
            <tr><td colspan="2"><input type="button" value="Add Users" onclick="doAjaxPost()"><br/></td></tr>
            <tr><td colspan="2"><div id="info" style="color: green;"></div></td></tr>
        </table>
        <a href="/AjaxWithSpringMVC2Annotations/ShowUsers.htm">Show All Users</a>
    </body>
</html>

Вы можете быть немного смущены, если не знаете JQuery. Вот объяснение кода JQuery:

  1. var name = $ (‘# name’). val (); : — здесь $ — селектор JQuery, который используется для выбора любого узла в HTML, идентификатор которого передается в качестве аргумента. Если идентификатор является префиксом с #, это означает, что это идентификатор узла HTML. Здесь $ (‘# name’). Val () содержит значение HTML-узла, который является «name». Текстовое поле, в котором пользователь вводит свое имя, является именем. поэтому имя переменной java-скрипта будет содержать имя пользователя.
  2. $ .ajax () : — это метод в переменной $ JQuery для вызова Ajax. Здесь пять аргументов. Прежде всего « тип », который указывает тип запроса Ajax. Это может быть POST или GET. Затем « url », который указывает на URL, который должен быть получен при отправке Ajax. « Data » будет содержать необработанные данные для отправки на сервер. « Success » будет содержать код функции, который должен быть вызван, если запрос будет успешным и сервер отправит ответ браузеру. « Error » будет содержать код функции, который должен быть вызван, если запрос получит какую-либо ошибку.
  3. $ ( ‘# информация’) HTML (ответ). : — установит ответ сервера в div. Таким образом, «привет» + имя будет показано в div, идентификатор которого « info ».

ShowUsers.jsp
Ниже приведен код в ShowUsers.jsp для печати всей информации об ученике из ArrayList на странице jsp:

Example Code Sample
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
        <title>Users Added using Ajax</title>
    </head>
    <body style="color: green;">
    The following are the users added in the list :<br>
        <ul>
            <c:forEach items="${Users}" var="user">
                <li>Name : <c:out value="${user.name}" />; Education : <c:out value="${user.education}"/>
            </c:forEach>
        </ul>
    </body>
</html>

Здесь мы использовали базовую taglib JSTL, чтобы перебрать ArrayList и показать каждое значение в браузере.

  • <c: forEach items = ”$ {Users}” var = ”user”> : тег используется для итерации по списку ArrayList. Свойство «items» используется для определения bean-компонента, в котором был сохранен объект List, поэтому items = »$ {Users}» говорит, что список bean-компонентов присутствует в bean-компоненте «Users». Атрибут «var» сообщает имя переменной, в которой будет храниться каждый пользователь.
  • <c: out value = ”$ {user.name}» /> : As, так как в переменной name «user» будет храниться один пользователь, поэтому для печати свойства name в объекте User мы используем $ {user.name}.

приложение-config.xml

Наш конфигурационный файл Spring MVC должен обрабатывать контроллеры, основанные на аннотациях. Конфигурация выглядит следующим образом:

Example Code Sample
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:context="http://www.springframework.org/schema/context"
xmlns:mvc="http://www.springframework.org/schema/mvc"
xsi:schemaLocation="
http://www.springframework.org/schema/beans    http://www.springframework.org/schema/beans/spring-beans-3.0.xsd
http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context-3.0.xsd
http://www.springframework.org/schema/mvc http://www.springframework.org/schema/mvc/spring-mvc-3.0.xsd">
 
    <!-- Scans the classpath of this application for @Components to deploy as beans -->
    <context:component-scan base-package="com.raistudies" />
 
    <!-- Configures the @Controller programming model -->
    <mvc:annotation-driven />
 
    <!-- Resolves view names to protected .jsp resources within the /WEB-INF/views directory -->
    <bean id="viewResolver" class="org.springframework.web.servlet.view.InternalResourceViewResolver">
        <property name="prefix" value="/WEB-INF/jsp/"/>
        <property name="suffix" value=".jsp"/>
    </bean>
 
</beans>

Разверните файл war на tomcat 6 и нажмите на ссылку в браузере, вы увидите следующую страницу:

Форма Ajax с использованием Spring MVC 3

Заполните информацию о студентах:

Заполненная форма Ajax с использованием Spring MVC 3

После этого нажмите кнопку «Добавить пользователей», вы получите сообщение о том, что пользователь был добавлен в список:

Ajax Подтверждение отправки формы Spring MVC 3

Чтобы показать всех учеников, добавленных в список, нажмите кнопку «Показать всех пользователей», вы увидите следующую страницу:

Показать всех пользователей Spring MVC 3

Это все из Ajax, использующего Spring MVC 3 и JQuery. Вы можете скачать источник по ссылке ниже.
Источник: Скачать

Справка: Ajax с Spring MVC 3 с использованием аннотаций и JQuery от нашего партнера по JCG  

87
Share: