您的位置: 首页  >  文章  >  使用带有注释和JQuery的Spring MVC 3的Ajax

使用带有注释和JQuery的Spring MVC 3的Ajax

分类: 文章 • 2024-04-07 18:54:33
与Ajax一起工作对我来说一直很有趣！ 是不是 ？ 我将使您轻松将Ajax与Spring MVC 3和JQuery结合使用。 这篇文章将向您说明如何在工业编码的现实生活中使用Ajax。 和往常一样，我们将在Spring MVC 3框架中以Ajax的实际示例为例，并将其实现，并且通过使您理解本主题，我将使实现变得容易。

让我们看看示例的要求是什么，Spring MVC 3 Ajax工具将如何满足它：
在我们的示例中，我们将列出姓名和学历最高的学生，并将其发送到安置办公室，以便学生获得机会。 我们将在线向学生提供“添加学生表格”，以便他们可以在线提交姓名并注册。 由于很多学生都会使用该系统，因此系统的性能可能会非常低。 为了提高Web应用程序的性能，我们将结合使用Ajax和Spring MVC 3 Framework和JQuery。
我们必须执行以下步骤来实现我们的示例：

  1. 首先，我们将创建一个包含学生信息值的域类（User.java）。
  2. 之后，我们将创建控制器类（UserListController.java）以处理HTTP请求。 我们的控制器将处理三种类型的请求。 首先，显示“添加学生表格”，其次处理来自“添加学生表格”的Ajax请求，并将学生添加到列表中，第三次显示学生信息作为列表。
  3. 然后，我们将创建一个jsp页面（AddUser.jsp）以显示“添加学生表单”，该页面将使用JQuery将Ajax请求发送到Spring MVC Controller。 jsp还将向用户确认已将Student添加到列表中。
  4. 然后，我们将创建一个jsp（ShowUsers.jsp），该列表将列出列表中的所有用户。

User.java
User.java具有两个属性名称和教育信息，用于存储学生信息。 以下是User.java的代码： 

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： 

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该方法返回的String是对请求的响应，它不必查找此字符串的视图。 因此，调整字符串将作为响应发送回浏览器，因此Ajax请求将起作用。 “ showUsers”方法用于向用户显示学生列表。
AddUser.jsp
AddUser.jsp包含一个简单的表单，用于收集有关学生的信息，并使用JQerey JavaScript框架生成对服务器的Ajax请求。 以下是AddUser.jsp中的代码： 

<%@ 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" οnclick="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节点的ID。 在这里， $（'＃name'）。val（）包含其“名称”HTML节点的值。 用户将在其中输入其姓名的文本框为name。 因此Java脚本变量名称将包含用户的名称。
  2. $ .ajax（） ：-是JQuery的$变量中的调用Ajax的方法。 这里有五个论点。 首先，“ type ”表示请求的Ajax类型。 它可以是POST或GET。 然后，“ url ”表示将要提交的Ajax提交的URL。 “ data ”将包含要发送到服务器的原始数据。 如果请求获得成功并且服务器向浏览器发送响应，则“ 成功 ”将包含必须调用的功能代码。 如果请求出现任何错误，“ error ”将包含必须调用的功能代码。
  3. $（'＃info'）。html（response）; ：-将服务器的响应设置为div。 这样，“ Hello” +名称将显示在ID为“ info ”的div中。

ShowUsers.jsp
以下是ShowUsers.jsp中的代码，用于将所有学生信息从ArrayList打印到jsp页面： 

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

在这里，我们使用了JSTL核心taglib来遍历ArrayList并在浏览器中显示每个值。

  • <c：forEach items =“ $ {Users}” var =“ user”> ：标签用于遍历ArrayList。 属性“ items”用于定义存储List对象的bean，因此items =” $ {Users}”表示在“ Users” bean中存在用户列表。 “ var”属性表示将存储每个用户的变量的名称。
  • <c：out value =” $ {user.name}” /> ：这样，单个用户将存储在变量名“ user”中，因此要使用$ {user.name}在User对象中打印name属性。

app-config.xml

我们的Spring MVC配置文件应该能够处理注释驱动的控制器。 配置如下： 

<?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并在浏览器中单击URL，将显示以下页面：

使用带有注释和JQuery的Spring MVC 3的Ajax
使用Spring MVC 3的Ajax表单

填写学生信息：

使用带有注释和JQuery的Spring MVC 3的Ajax
使用Spring MVC 3的Ajax填写表格

单击“添加用户”按钮后，您将收到一条消息，提示用户已被添加到列表中：

使用带有注释和JQuery的Spring MVC 3的Ajax
Ajax表单提交确认Spring MVC 3

要显示添加到列表中的所有学生，请单击“显示所有用户”按钮，您将获得以下页面：

使用带有注释和JQuery的Spring MVC 3的Ajax
显示所有用户Spring MVC 3

这一切都来自使用Spring MVC 3和JQuery的Ajax。 您可以从以下链接下载源代码。
资料来源： 下载

参考： 使用来自JCG合作伙伴的 Annotations和JQuery的带有Spring MVC 3的Ajax   Rai Studies博客上的Rahul Mondal。

翻译自: https://www.javacodegeeks.com/2012/02/ajax-with-spring-mvc-3-using.html

相关推荐