Spring MVC+ajax举办信息验证的要领

　 短视频，自媒体，达人种草一站处事

AJAX 不是新的编程说话，而是一种行使现有尺度的新要领。这篇文章首要先容了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>
<label for="exampleInputEmail1">用户名</label><input type="text"
onblur="check(this)"/>
<h5 id = "usernameInfo"></h4>
</div>

<div>
<label for="exampleInputPassword1">暗码</label><input type="password"
onblur="check(this)"/>
<h5></h4>
</div>
<div>
<label for="exampleInputPassword1">确认暗码</label><input type="password"
onblur="check(this)"/>
<h5></label>
</div>
<button type="submit">提交</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的代码：

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!