在本教程中，我们将看到如何使用Ajax和Spring MVC和JQuery在服务器端验证表单。 Spring MVC为通过注释驱动的配置采用Ajax提供了非常方便的过程。 我们将使用此注释驱动的配置以JSON数据的形式发送Ajax响应。 响应将包含表单验证的状态，并且表单数据中存在任何错误的错误消息。

使用的工具：

  • Spring MVC 3.0.3
  • jQuery 1.4.2
  • 杰克逊1.5.3
在示例中，我们将使用Ajax和Spring MVC将具有名称和教育程度的用户添加到列表中。 用户数据将在JQuery的帮助下发送到Spring MVC控制器，并且如果表单数据中没有验证错误，控制器将返回添加的用户的完整列表，直到时间为止；如果表单数据中存在验证错误，则控制器将返回验证错误。 。
因此，我们将在本教程中学习两个重要的知识：
  1. 如何在JQuery的帮助下在Spring MVC中使用Ajax验证表单数据？
  2. 以及如何将对象列表发回给Ajax调用作为响应？
用户的域类
以下是我们的User域类，它将保存表单数据： 
package com.raistudies.domain;public class User {private String name = null;private String education = null;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getEducation() {return education;}public void setEducation(String education) {this.education = education;}}

我们的用户域对象名称和教育有两个字段。
用于发送JSON响应的Ajax响应域类
以下是我们将用于发送响应的域对象：

package com.raistudies.domain;public class JsonResponse {private String status = null;private Object result = null;public String getStatus() {return status;}public void setStatus(String status) {this.status = status;}public Object getResult() {return result;}public void setResult(Object result) {this.result = result;}}

它包含两个属性，“状态”和“结果”。 “状态”字段是字符串类型，将包含“失败”或“成功”。 “结果”将包含其他要发送回浏览器的数据。
UserController.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.validation.ValidationUtils;
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.JsonResponse;
import com.raistudies.domain.User;@Controller
public class UserController {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 JsonResponse addUser(@ModelAttribute(value="user") User user, BindingResult result ){JsonResponse res = new JsonResponse();ValidationUtils.rejectIfEmpty(result, "name", "Name can not be empty.");ValidationUtils.rejectIfEmpty(result, "education", "Educatioan not be empty");if(!result.hasErrors()){userList.add(user);res.setStatus("SUCCESS");res.setResult(userList);}else{res.setStatus("FAIL");res.setResult(result.getAllErrors());}return res;}}

showForm（）用于将“添加”用户表单添加到浏览器。 方法addUser（）将处理ajax请求并验证User对象，如果表单数据中没有验证错误，它将把userList对象设置为JsonResponse类的result属性，状态为“ SUCCESS ”。 但是，如果表单数据中存在错误， 它将使用getAllErrors（）方法从BindingResult对象中提取错误列表，并将其设置为状态为“ FAIL ”的JsonResponse类的result属性。
AddUser.jsp
以下是在JQuery的帮助下使用Ajax调用UserController的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="<%=request.getContextPath() %>/js/jquery.js"></script>
<script type="text/javascript">var contexPath = "<%=request.getContextPath() %>";
</script>
<script src="<%=request.getContextPath() %>/js/user.js"></script>
<link rel="stylesheet" type="text/css" href="<%=request.getContextPath() %>/style/app.css">
</head>
<body>
<h1>Add Users using Ajax ........</h1><table><tr><td colspan="2"><div id="error" class="error"></div></td></tr><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" class="success"></div></td></tr></table>
</body>
</html>

该jsp页面包含一个js文件user.js ，该文件已用于保存JavaScript方法doAjaxPost（）的定义，该方法生成ajax类，并且还使用Ajax调用的响应来动态更新页面数据。
user.js
以下是ajax类的代码，并解释了从Spring MVC控制器收到的响应：

function doAjaxPost() {// get the form valuesvar name = $('#name').val();var education = $('#education').val();$.ajax({type: "POST",url: contexPath + "/AddUser.htm",data: "name=" + name + "&education=" + education,success: function(response){// we have the responseif(response.status == "SUCCESS"){userInfo = "<ol>";for(i =0 ; i < response.result.length ; i++){userInfo += "<br><li><b>Name</b> : " + response.result[i].name +";<b> Education</b> : " + response.result[i].education;}userInfo += "</ol>";$('#info').html("User has been added to the list successfully. " + userInfo);$('#name').val('');$('#education').val('');$('#error').hide('slow');$('#info').show('slow');}else{errorInfo = "";for(i =0 ; i < response.result.length ; i++){errorInfo += "<br>" + (i + 1) +". " + response.result[i].code;}$('#error').html("Please correct following errors: " + errorInfo);$('#info').hide('slow');$('#error').show('slow');}},error: function(e){alert('Error: ' + e);}});
}

JQuery的$ .ajax（）方法已用于在此处进行Ajax调用，该调用将表单数据名称和教育字段值发送给Spring Controller。 在Ajax调用成功后，它首先检查响应的状态字段。 请注意，此处的响应对象是JsonResponse Java对象的JSON表示形式。
如果响应的状态字段为“ SUCCESS”，则使用符号response.result [i]遍历用户列表，请注意，杰克逊库将Java的列表对象转换为json数组。
如果状态为“ FAIL”，则结果对象将包含验证错误，我们可以使用符号response.result [i] .code进行访问 ，此处代码将返回在Spring控制器中添加的错误消息。 在tomcat 6服务器上运行示例时，它将打开以下形式：

Ajax验证表

只需单击“添加用户”按钮而不输入任何值，它将显示该字段的错误，如下图所示：

页面中的Ajax验证显示错误

现在输入任何名称和学历，然后单击“添加用户”按钮。 它将在列表中添加用户详细信息，并在页面上显示整个用户列表的信息：

使用Spring MVC和JQuery成功页面进行Ajax验证

您也可以通过从以下链接下载示例来尝试该示例：

资料来源： 下载
来源+库： 下载

参考：我们的JCG合作伙伴 使用Spring MVC和JQuery进行Ajax表单验证   Rai Studies博客上的Rahul Mondal。

翻译自: https://www.javacodegeeks.com/2012/02/spring-mvc-and-jquery-for-ajax-form.html

Spring MVC和JQuery用于Ajax表单验证相关推荐

  1. bootstrap html5 表单验证,基于Bootstrap+jQuery.validate实现表单验证

    这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登陆这块,也就尤 ...

  2. 2013年jQuery Validation Engine 表单验证

    目录(?)[-] options 参数说明可选 使用方法 载入 CSS 文件 载入 JavaScript 文件 给表单加上 ID 给控件加上 ID 及 设置验证类型 设置验证 验证类型 API 方法 ...

  3. jquery validation Engine表单验证

    jQuery Validation Engine 表单验证来源 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 Ajax 验证,除自身拥有丰富的验证规则外, ...

  4. 自己编写jQuery插件之表单验证

    自己编写jQuery插件之表单验证 吐个嘈先:最近状态不咋滴,真是什么都不想干,不想上班,做什么都没动力,觉得没意思.不想这样,不想这样,快让这种情绪消失吧,忽忽.... 表单验证在项目中用的还是比较 ...

  5. jQuery Validation Engine 表单验证踩过的一个坑

    jQuery Validation Engine表单验证是一个非常简单好用的前端验证插件,具体的使用手册可以参考: http://code.ciaoca.com/jquery/validation-e ...

  6. 处理ajax表单验证结果,使用 jQuery Form 插件完成带数据验证的 Ajax 表单

    表单提交之前,一般我们要在前端对表单的输入值做一些基本验证,以避免恶意提交,并提高安全性.我们可以通过两个 jQuery 插件实现这两个功能:Malsup's AjaxForm 和 Bassistan ...

  7. php提交后刷新父页面,jquery – php ajax表单提交没有刷新父页面

    我有一些问题的ajax表单提交 $("#send").on("click", function() { $.ajax({ type: "POST&qu ...

  8. jQuery Validation Engine 表单验证

    转载至:http://code.ciaoca.com/jquery/validation_engine/ 功能强大的 jQuery 表单验证插件,适用于日常的 E-mail.电话号码.网址等验证及 A ...

  9. jquery的validate表单验证表单注册插件

    这款插件非常好用! 首先导入插件: <script src="js/jquery.validate.min.js" type="text/javascript&qu ...

最新文章

  1. 本周技术主题-----.net中的资源文件
  2. 实现一个 WPF 版本的 ConnectedAnimation
  3. 2月1日学习内容整理：算法
  4. excel函数公式html文档,Excel中把计算式转换为运算结果的方法 EXCEL中计算出的公式如何转换成纯文本内容？...
  5. js调用php函数兵每秒刷新,深入理解JavaScript立即调用函数表达式（IIFE）
  6. javascript中的内存管理
  7. 微软开源PowerShell并支持Linux
  8. jsf表单验证_动态表单，JSF世界期待已久
  9. JAXB，SAX，DOM性能
  10. tablestore列式存储原理_10分钟搞透：技术人必会的MySQL体系结构与存储引擎！
  11. 吴恩达深度学习 —— 2.16 关于python/numpy向量的说明
  12. ERmaster 数据库设计 ,显示中文逻辑名
  13. 文档协作编辑 ONLYOFFICE 部署和使用教程
  14. 露出真容，小米家用摄像头拆解，看看有什么
  15. 英语思维导图大全 连词(六）
  16. 【VTM10.0】量化之RDOQ技术
  17. 流畅安装、简单使用annie下载B站视频
  18. A micro Lie theory for state estimation in robotics002
  19. C++在使用fgetc读取文件时出现方框乱码
  20. 敏捷开发流程之Scrum：3个角色、5个会议、12原则

热门文章

  1. 会话技术Session
  2. 多线程的三种实现方法
  3. java中的lombok_如何在Java中使用Lombok删除样板设置器吸气剂
  4. apache derby_Apache Derby数据库用户和权限
  5. java中的深度克隆浅克隆_了解Java中的可克隆接口
  6. lombok 自动使用_Lombok，自动值和不可变项
  7. web.xml.jsf_JSF 2.2在30秒内创建一个自定义Hello World组件
  8. mwc校准油门_编写下载服务器。 第五部分：油门下载速度
  9. jvm 架构_不可变的基础架构，热部署和JVM
  10. java锁性能对比_提高Java的锁性能