Spring MVC和JQuery用于Ajax表单验证

在本教程中,我们将看到如何使用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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/373577.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

myeclipse10.7破解成功 但 无法打war包 提示:securecrt alert:integrity ch

myeclipse10.7破解成功 但 无法打war包 提示&#xff1a;securecrt alert:integritycheck error找了好久才找到解决办法http://download.csdn.net/detail/yi303526230/6889101#comment本次对于myeclipse10破解后&#xff0c;导出war包时报“SECURITY ALERT: INTEGERITY CHECK E…

Mongodb的update操作

在前面的文章“mongodb 查询的语法”里&#xff0c;我介绍了Mongodb的常用查询语法&#xff0c;Mongodb的update操作也有点复杂&#xff0c;我结合自己的使用经验&#xff0c;在这里介绍一下&#xff0c;给用mongodb的朋友看看&#xff0c;也方便以后自己用到的时候查阅&#x…

封装方法

<?php class DBDA {public $host"localhost";public $uid"root";public $pwd"123";public $dbname"mydb";/***给一个sql语句&#xff0c;返回执行的结果*param string $sql 用户指定的sql语句*param int $type 用户给的语句类型&a…

AFNetwork 作用和使用方法具体解释

转自&#xff1a;http://www.maxiaoguo.com/clothes/269.html AFNetworking是一个轻量级的iOS网络通信类库。它建立在NSURLConnection和NSOperation等类库的基础上&#xff0c;让非常多网络通信功能的实现变得十分简单。它支持HTTP请求和基于REST的网络服务&#xff08;包含GET…

在MongoDB中存储分层数据

继续使用MongoDB进行 NoSQL之旅&#xff0c;我想触摸一个经常出现的特定用例&#xff1a;存储分层文档关系。 MongoDB是很棒的文档数据存储&#xff0c;但是如果文档具有父子关系怎么办&#xff1f; 我们可以有效地存储和查询此类文档层次结构吗&#xff1f; 答案是肯定的&…

图的深度遍历

图的深度遍历 Time Limit: 1000MS Memory Limit: 65536KBSubmit StatisticProblem Description 请定一个无向图&#xff0c;顶点编号从0到n-1&#xff0c;用深度优先搜索(DFS)&#xff0c;遍历并输出。遍历时&#xff0c;先遍历节点编号小的。Input 输入第一行为整数n&#xff…

Linux学习笔记——gzip命令

这个 gzip 程序被用来压缩一个或多个文件。当执行 gzip 命令时&#xff0c;则原始文件的压缩版会替代原始文件。 相对应的 gunzip 程序被用来把压缩文件复原为没有被压缩的版本。gzip 选项&#xff1a;选项 说明-c把输出写入到标准输出&#xff0c;并且保留原始文件。也有可能用…

java集合类——Stack类

查看java的API文档&#xff0c;Stack继承Vector类。 栈的特点是后进先出。 API中Stack自身的方法不多&#xff0c;基本跟栈的特点有关。 Java代码 import java.util.Stack; public class StackTest { public static void main(String[] args) { Stack&l…

免装版_无缝贴图制作软件 PixPlant2中文免装版

点击上方蓝字关注我们如您喜欢我们的公众号&#xff0c;不妨推荐给身边的朋友资源介绍&#xff1a;资源来源于网络&#xff0c;很多时候我们从网上找的贴图并不是无缝的&#xff0c;而且一般都没有高光/法线贴图这些&#xff0c;在材质的模拟上就要差了很多&#xff0c;在这里小…

网页特效:用CSS3制作3D图片立方体旋转特效

<!DOCTYPE html> <html> <head> <meta charset"utf-8" /> <title>CSS3制作3D图片立方体旋转特效 - 站长素材</title><style type"text/css">html{background:linear-gradient(#ff0 0%,#F00 80%);height: 100%; …

Java中使用Map and Fold进行功能性编程

在函数式编程中&#xff0c;Map和Fold是两个非常有用的运算符&#xff0c;它们属于每种函数式语言。 如果Map和Fold运算符是如此强大且必不可少&#xff0c;那么您如何解释说即使Java编程语言缺少这两个运算符&#xff0c;我们也可以使用Java来完成工作&#xff1f; 事实是&…

Linux 文件压缩解压缩

文章来自&#xff1a;http://www.xuexiyuan.cn/article/detail/53.html *.tar格式 解包1&#xff1a;$ tar -xvf FileName.tar解包2&#xff1a;$ tar -xvf FileName.tar -C DirName# tar解压缩到指定目录打包&#xff1a;$ tar -cvf FileName.tar DirName# tar是打包&#x…

Mysql 分页语句Limit用法

Mysql 分页语句Limit用法 1、Mysql的limit用法 在我们使用查询语句的时候&#xff0c;经常要返回前几条或者中间某几行数据&#xff0c;这个时候怎么办呢&#xff1f;不用担心&#xff0c;mysql已经为我们提供了这样一个功能。 Sql代码 SELECT * FROM table LIMIT [offset,] r…

sqlmap指定cookie_利用SQLMap进行cookie注入

SQLMap被称为注入神器&#xff0c;N多大神都使用SQLmap来进行注入测试&#xff0c;我等小菜当然也会用来装一下A*C&#xff0c;用了N久SQLMAP了&#xff0c;但是极少用 到cookie注入&#xff0c;一遇到cookie注入就去使用注入中转工具&#xff0c;比较麻烦。刚好今天群里的USB问…

c语言else匹配问题

1 #include <stdio.h>2 #include <stdlib.h>3 4 //实现 依次输入三个递增的数 然后正确输出5 6 //为什么得不到我们想要的结果呢 这就是else匹配的问题 当然了 在编译器里面他会自动给你匹配7 //但是如果没有了编译器 笔试的时候呢。。。。8 //原因为&#xff1a;e…

Java:伪造工厂的闭包以创建域对象

最近&#xff0c;我们想要创建一个域对象&#xff0c;该对象需要具有外部依赖关系才能进行计算&#xff0c;并且希望能够在测试中解决该依赖关系。 最初&#xff0c;我们只是在领域类中新建依赖项&#xff0c;但这使得无法在测试中控制其值。 同样&#xff0c;我们似乎不应该将…

利用scp 远程上传下载文件/文件夹

利用scp传输文件 1、从服务器下载文件 scp usernameservername:/path/filename /tmp/local_destination 例如scp codinglog192.168.0.101:/home/kimi/test.txt 把192.168.0.101上的/home/kimi/test.txt 的文件下载到 /tmp/local_destination 2、上传本地文件到服务器 scp /…

KEIL编译错误总结:

1 expected an identifier&#xff1a;#define宏定义常量后&#xff0c;如果再用前面定义的常量作为枚举常量就会报错&#xff0c;方法&#xff0c;去掉#define宏定义 2 ERROR L118: REFERENCE MADE TO ERRONEOUS EXTERNAL 定义的变量和外部声明调用的变量存储类型不一致&#…

视觉平衡与物理平衡_设计中的平衡理论为什么这么重要?

原标题&#xff1a;设计中的平衡理论为什么这么重要&#xff1f;在平面设计中很重要的理论就是关于平衡的应用。无论在logo设计还是网页设计还是海报设计中&#xff0c;一个好的设计一定会兼顾视觉的平衡。今天123标志网就跟大家一起看看平衡的力量。构图平衡主要意味着调整设计…

Tomcat、JDK 历史版本下载地址

Tomcat 历史版本下载地址http://archive.apache.org/dist/tomcat/ JDK 历史版本下载地址 https://www.oracle.com/technetwork/java/javase/archive-139210.html 个人博客&#xff1a;学习园 原文地址&#xff1a;http://www.xuexiyuan.cn/article/detail/190.html