本文介绍了ajax与Spring MVC的结合使用。首先，让我们了解一下什么是Ajax。

AJAX不是一种新的编程语言，而是一种使用现有标准的新方式。AJAX最大的优点是可以和服务器交换数据，更新一些网页，而不需要重新加载整个页面。因此，ajax对于改善用户体验非常重要

XMLHttpRequest是AJAX的基础。

主要有两种方法：

var xmlhttp=new XMLHttpRequest()；xmlhttp.open(方法、url、异步)xmlhttp . send()；在open方法中的参数中，method代表请求的类型(GET/POST)，url代表要请求的资源的位置，async代表是否启动异步请求。该值通常用true填充，因为它更快，并且不会由于服务器响应缓慢而导致程序挂起。

发送方法当然是发起请求的动作

注意：如果您需要像HTML表单一样的POST数据，请使用setRequestHeader()添加一个HTTP头。然后在send()方法中指定要发送的数据：

xmlhttp.open('POST '，' url '，true)；xmlhttp . setrequestheader(' Content-type '，' application/x-www-form-URL encoded ')；//这篇文章很重要也很有用：xmlhttp . send(' fname=henryname=Ford ')；上述代码的第二行指示要发送的数据类型。实际上，我们用来指定要发送的类型的常用值是JSON类型，即‘application/JSON’。为什么常用JSON类型？想想看，当我们想要发送多个值的时候，如果我们一个一个的组织，会很麻烦，而且在服务器得到数据之后，我们需要一个一个的从request.parameter中取出数据，这样很浪费时间。所以使用JSON，我们可以先把数据写成JSON格式，然后发送到后端，后端会自动解析，自动把数据填充到对应的POJO中，非常方便。

但是要做到这一点，我们需要以下配置：

(1)将内容类型设置为‘application/json’，目的是告诉服务器JSON来了。

(2)使用JSON.stringify将数据转换成JSON字符串，然后传输。

(3)服务器控制器需要在方法的参数前使用@requestBody，这样服务器就会调用相应的解析器来解析请求

这里我们有一个完整的请求要完成！看完请求，我们再来看一下响应。ajax接受如下响应：

xmlhttp . onreadystatechange=function()//自动调用{ if(xmlhttp . readystate==4xmlhttp . status==200){ xmldoc=xmlhttp . responsexml；//获取值}}接收到响应后，Ajax会自动调用onreadystatechange方法，然后通过responseXML获取返回值，这时我们会遇到一个问题：在Spring MVC中，返回值会被写入ModelAndView中，然后找到视图，将数据渲染到视图中，无法达到预期的效果，也就是不指定视图就返回数据，所以需要使用@responseBody。

声明@requestBody后，如果返回值是字符串，则直接将字符串写入客户端；如果是对象，对象将被转换成JSON字符串，然后写入客户端。这里需要注意的是，如果一个对象被返回，它是由utf-8编码的。如果返回String，默认按照iso8859-1编码，页面可能会乱码。因此，我们可以手动修改注释中的编码格式，如@ request mapping(value='/cat/query '，product=' text/html；Charset=utf-8 ')，后跟请求的路径和编码格式。在客户端，获取json字符串后，可以使用JSON.parse()将响应转换为JSON对象，使用方便

示例演示：

表格如下：

表单角色='表单'操作='用户控制器/插入。do ' div class=' form-group '标签为='范例输入档案1 '用户名/label input name=' username ' type=' text ' class=' form-control ' id=' exampinputail 1 ' on bulr=' check(this)'/H5 style=' color : red ' id=' usernameInfo '/H4/div class=' form-group '标签为='范例输入密码1 '密码/label输入名称=' password ' type=' password ' class=' form-control ' id=' exampinputpassword 1 ' on bulr=' check(this)'/H5 style=' color : red ' id=' passInfo '/H4/div class=' form-group '标签为=' exampinputpassword 1 '确认密码/label input name=' repassword ' type=' password ' class=' form-control ' id=' exampinputpassword 2 ' on bulr=' check(this)'/H5 style=' color : red ' id=' repassInfo '/label/div button type=' submit ' class=' BTN BTN-success BTN-LG BTN-block '提交/按钮/表单表单通过失去焦点的在布尔触发器触发检查的射流研究…代码检查()

var check=函数(信息){ if(信息。name==' username '){ var username=document。getelementbyid(' exampinputail 1 ')。价值。trim()；if(username==' '){ document。getelementbyid(' usernameInfo ').innerHTML='用户名不能为空；} else { LoadXMldoc()；//执行埃阿斯检查}/////分割线////////////////////////////////分割线/////////////////////////////////////////分割线} else if(信息。name==' password '){ var pass=document。getelementbyid(' exampinputpassword 1 ')。价值。trim()；if(pass==' '){ document。getelementbyid(' passInfo ').innerHTML='密码不能为空；} else { document。getelementbyid(' passInfo ').innerHTML=} } else { var值1=document。getelementbyid(' exampinputpassword 2 ').价值；var值2=文档。getelementbyid(' exampinputpassword 1 ').价值；if (value1！=值2){文档。getelementbyid(' repassInfo ').innerHTML='前后密码不一致；} else { document。getelementbyid(' repassInfo ').innerHTML=} }}上面的代码差不多相同，所以只用看分割线上的就差不多了，分割线上面的是先用本地射流研究…检测用户输入是否为空，然后若不为空，则执行埃阿斯代码，检查账号是否已经被占用，Ajax代码如下：

var loadXMLDoc=function(){ var xmlhttp=new XMLHttpRequest()；xmlhttp。onreadystatechange=function(){ if(xmlhttp。readystate==4 xmlhttp。status==200){ var text=xmlhttp。responsetext文件。getelementbyid(' usernameInfo ').innerHTML=文本；//设置反馈信息} } var name=文档。getelementbyid(' exampinputail 1 ').价值；//获取用户输入xmlhttp.open('GET '，' userController/checkInfo.do？username=' name，true)；//构造请求xmlhttp。send()；//发送}最后看看控制器的代码：

@RequestMapping(值='/checkInfo '，产生={ ' text/html；'charset=utf-8；'}) //设置编码@ResponseBody //设置响应转换为数据公共字符串检查(HttpServletrequest requst){ 0字符串用户名=requst.getParameter('用户名');System.out.println(用户名);整数id=userService.check(用户名);//检查账号是否已经存在if (id！=null) { 9 return '账号已经存在；} else { return} }成果展示：

利用射流研究…提醒密码不能为空

利用创建交互式、快速动态网页应用的网页开发技术检测账号是否重复，以及利用射流研究…检测前后密码是否一致

总结

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