Spring MVC+ajax进行信息验证的方法

本文是一个ajax结合Spring MVC使用的入门,首先我们来了解一下什么是Ajax

AJAX 不是新的编程语言,而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容。所以ajax对于提升用户体验十分重要

XMLHttpRequest 是 AJAX 的基础。

主要的方法有两种:

var xmlhttp=new XMLHttpRequest();
xmlhttp.open(method,url,async)
xmlhttp.send();

  open方法里面的参数中,method代表请求的类型(GET/POST), url 代表要要请求的资源的位置,async代表是否要启动异步请求,这个值一般都填true,因为这样更快,不会因为服务端的响应慢而导致程序挂起

  send方法当然就是发起请求的动作啦

  这里需要注意:如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定你希望发送的数据:

xmlhttp.open("POST","url",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");  //这一条非常重要,也非常有用
xmlhttp.send("fname=Henry&lname=Ford");

  上面代码中的第2行,指明了发送的数据类型,其实一般我们用来指定发送的类型常用值是JSON类型,也就是"application/json",为什么常用JSON类型呢?你想想,当我们要发送多个值的时候,如果一个一个参数的去组织,那将是多么麻烦呀,而且服务端拿到数据后,还要我们一个一个的将数据从request.parameter里面拿出来,非常的浪费时间,所以,利用JSON,可以将数据先写成JSON格式,再传到后端,后端会自动解析,自动将数据填入对应的POJO,非常方便,

但是要做到这些,我们需要以下配置:

(1)设置content-type 为 "application/json" ,目的是告诉服务端传过来的是JSON

(2)用JSON.stringify将数据转换成JSON字符串再传送

(3)服务端Controller需要在方法的参数前用@requestBody,这样服务端就会调用相应的解析器,将请求解析

  到这里我们一个完整的请求就完成啦!看完了请求,接下来我们再看响应,ajax接受响应的函数如下:

xmlhttp.onreadystatechange=function()  //自动调用
 {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
   xmlDoc=xmlhttp.responseXML; //获得值
  }
 }

  Ajax在接收到响应之后,会自动调用 onreadystatechange方法,然后通过responseXML获取返回值,那么我们就会遇到一个问题:在Spring MVC中,返回值会写到ModelAndView中,然后查找到视图,将数据渲染到视图中,不能达到我们要的效果,即返回数据而不指定视图,所以我们要用到@responseBody

  声明@requestBody后,返回值如果是字符串则直接将字符串写到客户端,假如是一个对象,此时会将对象转化为JSON串然后写到客户端。这里需要注意的是,如果返回对象,按utf-8编码。如果返回String,默认按iso8859-1编码,页面可能出现乱码。因此在注解中我们可以手动修改编码格式,例如@RequestMapping(value="/cat/query",produces="text/html;charset=utf-8"),前面是请求的路径,后面是编码格式。在客户端,获得JSON字符串以后,可以利用JSON.parse()将响应转换为json对象,方便使用

一个实例demo:

表单如下:

<form role="form" action="userController/insert.do">
  <div class="form-group">
    <label for="exampleInputEmail1">用户名</label><input name="username" type="text" class="form-control" id="exampleInputEmail1"
                             onblur="check(this)"/>
    <h5 style="color:red" id = "usernameInfo"></h4>
  </div>

  <div class="form-group">
    <label for="exampleInputPassword1">密码</label><input name="password" type="password" class="form-control" id="exampleInputPassword1"
                              onblur="check(this)"/>
    <h5 style="color:red" id="passInfo"></h4>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">确认密码</label><input name="repassword" type="password" class="form-control" id="exampleInputPassword2"
                               onblur="check(this)"/>
    <h5 style="color:red" id="repassInfo"></label>
  </div>
  <button type="submit" class="btn btn-success btn-lg btn-block">提交</button>
</form>

表单通过失去焦点的onblur触发器触发检查的 js 代码 check()

var check = function(info){
  if (info.name=="username"){
    var username = document.getElementById("exampleInputEmail1").value.trim();
    if (username=="") {
      document.getElementById("usernameInfo").innerHTML = "用户名不能为空";
    }else{
      loadXMLDoc(); //执行Ajax检查
    }
/////分割线////////////////////////////////分割线/////////////////////////////////////////分割线
  }else if (info.name=="password"){
      var pass=document.getElementById("exampleInputPassword1").value.trim();
      if (pass==""){
        document.getElementById("passInfo").innerHTML="密码不能为空";
      }else{
        document.getElementById("passInfo").innerHTML="";
      }
  }else{
    var value1=document.getElementById("exampleInputPassword2").value;
    var value2=document.getElementById("exampleInputPassword1").value;
    if (value1!=value2){
      document.getElementById("repassInfo").innerHTML="前后密码不一致";
    }else{
      document.getElementById("repassInfo").innerHTML="";
    }
  }
}

上面的代码差不多相同,所以只用看分割线上的就差不多了,分割线上面的是先用本地JS检测用户输入是否为空,然后若不为空,则执行Ajax代码,检查账号是否已经被占用,Ajax代码如下:

var loadXMLDoc=function() {
  var xmlhttp=new XMLHttpRequest();
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      var text=xmlhttp.responseText;
      document.getElementById("usernameInfo").innerHTML=text; //设置反馈信息
    }
  }
  var name = document.getElementById("exampleInputEmail1").value;  //获取用户输入
  xmlhttp.open("GET","userController/checkInfo.do?username="+name,true);  //构造请求
  xmlhttp.send();                           //发送
}

最后看看Controller的代码:

  @RequestMapping(value="/checkInfo",produces={"text/html;charset=utf-8;"})  //设置编码
  @ResponseBody                                //设置响应转换为JSON
  public String check(HttpServletRequest requst) {
    String username = requst.getParameter("username");
    System.out.println(username);
    Integer id = userService.check(username);    //检查账号是否已经存在
    if (id!=null) { 9       return "账号已经存在";
    }else {
      return "";
    }
  }

成果展示:

利用js提醒密码不能为空

                          

利用ajax检测账号是否重复,以及利用JS检测前后密码是否一致

总结

以上所述是小编给大家介绍的Spring MVC+ajax进行信息验证的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

(0)

相关推荐

  • SpringMVC使用@Valid注解进行数据验证的方法

    我们在做Form表单提交的时候,只在前端做数据校验是不够安全的,所以有时候我们需要在后端同样做数据的校验.好在SpringMVC在后台验证给我们提供了一个比较好的支持.那就是使用Valid接口的实现类做数据校验.在这之前我们先做一下准备的工作. 添加相关的Maven依赖 我们先把需要的jar包添加进来. <dependency> <groupId>javax.validation</groupId> <artifactId>validation-api<

  • Spring MVC Annotation验证的方法

    简介说明 使用Spring MVC的Annotation验证可以直接对view model的简单数据验证,注意,这里是简单的,如果model的数据验证需要有一些比较复杂的业务逻辑性在里头,只是使用annotation做验证是比较难的. 以下是使用Spring MVC自带的annotation验证,加上自定义的一个@Tel的annotation验证例子,此例子具有: 1.支持多语言(国际化) 2.对默认数据先进行转化,比如int.date类型如果传入空值时,会抛异常,默认给定值 先看配置: 1.w

  • springMVC 用户登录权限验证实现过程解析

    通过上网搜资料显示,使用filter和interceptor都可以实现.不过推荐使用interceptor. 下面就使用Interceptor实现用户登录权限验证功能. 拦截器需要实现Inceptor拦截器接口的三个方法. 1.preHandle方法 顾名思义,该方法将在请求处理之前进行调用.SpringMVC 中的Interceptor 是链式的调用的,在一个应用中或者说是在一个请求中可以同时存在多个Interceptor .每个Interceptor 的调用会依据它的声明顺序依次执行,而且最

  • SpringMVC拦截器——实现登录验证拦截器的示例代码

    本例实现登陆时的验证拦截,采用SpringMVC拦截器来实现 当用户点击到网站主页时要进行拦截,用户登录了才能进入网站主页,否则进入登陆页面 核心代码 首先是index.jsp,显示链接 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String bas

  • springMVC实现图形验证码(kaptcha)代码实例

    springMVC项目中实现图形验证码功能,可以使用kaptcha来实现,下面是步骤 一.引入架包,pom.xml <dependency> <groupId>com.google.code</groupId> <artifactId>kaptcha</artifactId> <version>2.3.2</version> </dependency> 二.kaptchaProducer配置,需要在spring

  • springmvc拦截器登录验证示例

    一开始,学了拦截器与过滤器,咋一看两者有点像,实际上两者有很大的不同.就用拦截器和过滤器分别做了登录验证试验,这次先说拦截器.下面是自己实践的一个实例: 在spring-mvc.xml中配置拦截器: <mvc:interceptors> <mvc:interceptor> <mvc:mapping path="/user/*"/> <!-- 定义在mvc:interceptor下面的表示是对特定的请求才进行拦截的 --> <bean

  • Spring MVC InitBinder验证方法

    使用InitBinder做验证的情况一般会在此Controller中提交的数据需要有一些是业务性质的,也即比较复杂的验证情况下才会使用.大部份简单的表单验证,使用annotation验证即可以解决. Annotation验证使用方法可参见:http://www.jb51.net/article/136448.htm 这里需要注意的一点:InitBinder和Annotation两种验证只能二选一,如果使用了InitBinder,就不能使用Annotation验证. 前面的web.xml和spri

  • SpringMVC实现表单验证功能详解

    本章节内容很丰富,主要有基本的表单操作,数据的格式化,数据的校验,以及提示信息的国际化等实用技能. 首先看效果图 项目结构图 接下来用代码重点学习SpringMVC的表单操作,数据格式化,数据校验以及错误提示信息国际化.请读者将重点放在UserController.java,User.java,input.jsp三个文件中. maven 项目必不可少的pom.xml文件.里面有该功能需要的所有jar包. <?xml version="1.0" encoding="UTF

  • 使用SpringMVC的@Validated注解验证的实现

    1.SpringMVC验证@Validated的使用 第一步:编写国际化消息资源文件 编写国际化消息资源ValidatedMessage.properties文件主要是用来显示错误的消息定制 edit.username.null=用户名不能为空 edit.password.size=密码最少{min}位,最长{max}位 ...... 可以将edit.username.null与edit.password.size看为参数,在message中传递,具体请看第二步. 第二步:Bean实体类中加注解

  • Spring MVC+ajax进行信息验证的方法

    本文是一个ajax结合Spring MVC使用的入门,首先我们来了解一下什么是Ajax AJAX 不是新的编程语言,而是一种使用现有标准的新方法.AJAX 最大的优点是在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容.所以ajax对于提升用户体验十分重要 XMLHttpRequest 是 AJAX 的基础. 主要的方法有两种: var xmlhttp=new XMLHttpRequest(); xmlhttp.open(method,url,async) xmlhttp.se

  • jQuery使用$.ajax进行即时验证的方法

    本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTYPE h

  • 详解获取Spring MVC中所有RequestMapping以及对应方法和参数

    在Spring MVC中想要对每一个URL进行权限控制,不想手工整理这样会有遗漏,所以就动手写程序了.代码如下: /** * @return * @author Elwin ZHANG * 创建时间:2017年3月8日 上午11:48:22 * 功能:返回系统中的所有控制器映射路径,以及对应的方法 */ @RequestMapping(value = "/maps", produces = "application/json; charset=utf-8") @Re

  • Spring MVC拦截器的基本使用方法

    拦截器简介 Spring MVC 中的拦截器(Interceptor)类似于 Servler 中的过滤器(Filter).用于对处理器进行预处理和后处理.常用于日志记录.权限管理.性能监控.通用行为等. 拦截器的实现 Spring MVC 中的拦截器需要我们手动实现和配置.拦截器可以通过以下两种方式定义 实现 HandleInterceptor 接口,或者继承该接口的实现类如 HandleInterceptorAdapter 来定义一个拦截器: 实现 WebRequestInterceptor

  • Spring mvc防止数据重复提交的方法

    本文实例为大家分享了Spring mvc如何防止数据重复提交,供大家参考,具体内容如下 方法分析: 这里使用的防止数据重复提交的方法是使用token,给所有的url加一个拦截器,在拦截器里面用java的UUID生成一个随机的UUID并把这个UUID放到session里面,然后在浏览器做数据提交的时候将此UUID提交到服务器.服务器在接收到此UUID后,检查一下该UUID是否已经被提交,如果已经被提交,则不让逻辑继续执行下去. 源码实现: 注解Token代码: @Target(ElementTyp

  • Spring mvc AJAX技术实现原理解析

    简介 AJAX = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML). AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. Ajax 不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术. 在 2005 年,Google 通过其 Google Suggest 使 AJAX 变得流行起来.Google Suggest能够自动帮你完成搜索单词. Google Suggest 使用 AJAX

  • Spring MVC整合Shiro权限控制的方法

    Apache Shiro 是一个功能强大且灵活的开放源代码安全框架,可以细粒度地处理认证 (Authentication),授权 (Authorization),会话 (Session) 管理和加密 (cryptography) 等企业级应用中常见的安全控制流程. Apache Shiro 的首要目标是易于使用和理解. 有时候安全性的流程控制会非常复杂,对开发人员来说是件很头疼的事情,但并不一定如此. 框架就应该尽可能地掩盖复杂性,并公开一个简洁而直观的 API,从而简化开发人员的工作,确保其应

  • Spring MVC通过添加自定义注解格式化数据的方法

    springmvc 自定义注解 以及自定义注解的解析 一.自定义注解名字 @Target({ElementType.TYPE, ElementType.METHOD}) //类名或方法上 @Retention(RetentionPolicy.RUNTIME)//运行时 @component//自定义多个注解,且在一个类中添加两个或以上的,只需要加一个 否则会实例化多次. public @interface SocketMapping { String value() default ""

  • Spring MVC 拦截器实现登录

    上篇博文我在博客中讲到如何使用spring MVC框架来实现文件的上传和下载,今天小钱给大家再来分享和介绍Spring MVC框架中相当重要的一块功能--拦截器. 关于拦截器的概念我在这里就不多说了,大家可以上网百度或者看别人写的具体博客,我今天要说的是拦截器在实际开发中它有什么作用,怎样用Spring MVC拦截器来实现可拔插方式管理各种功能.Interceptor拦截器,它的主要作用就是拦截用户的请求并进行相应的处理.什么意思呢?比如说:通过拦截器来进行用户的权限验证,或者是用来判断用户是否

  • Spring MVC 文件上传的示例代码

    一如既往记录下常用而又容易忘记的东西,本篇博文主要针对Spring MVC是如何上传文件的.以下记录两种上传方法并针对案例进行记录.(有关spring mvc其他配置省略) 1.使用Spring MVC 上传文件必须配置文件解析器,如下: <!-- 上传文件拦截,设置最大上传文件大小 10M=10*1024*1024(B)=10485760 bytes --> <bean id="multipartResolver" class="org.springfra

随机推荐