Spring MVC+ajax進(jìn)行信息驗(yàn)證的方法
本文是一個(gè)ajax結(jié)合Spring MVC使用的入門,首先我們來(lái)了解一下什么是Ajax
AJAX 不是新的編程語(yǔ)言,而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法。AJAX 最大的優(yōu)點(diǎn)是在不重新加載整個(gè)頁(yè)面的情況下,可以與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁(yè)內(nèi)容。所以ajax對(duì)于提升用戶體驗(yàn)十分重要
XMLHttpRequest 是 AJAX 的基礎(chǔ)。
主要的方法有兩種:
var xmlhttp=new XMLHttpRequest(); xmlhttp.open(method,url,async) xmlhttp.send();
open方法里面的參數(shù)中,method代表請(qǐng)求的類型(GET/POST), url 代表要要請(qǐng)求的資源的位置,async代表是否要啟動(dòng)異步請(qǐng)求,這個(gè)值一般都填true,因?yàn)檫@樣更快,不會(huì)因?yàn)榉?wù)端的響應(yīng)慢而導(dǎo)致程序掛起
send方法當(dāng)然就是發(fā)起請(qǐng)求的動(dòng)作啦
這里需要注意:如果需要像 HTML 表單那樣 POST 數(shù)據(jù),請(qǐng)使用 setRequestHeader() 來(lái)添加 HTTP 頭。然后在 send() 方法中規(guī)定你希望發(fā)送的數(shù)據(jù):
xmlhttp.open("POST","url",true); xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); //這一條非常重要,也非常有用 xmlhttp.send("fname=Henry&lname=Ford");
上面代碼中的第2行,指明了發(fā)送的數(shù)據(jù)類型,其實(shí)一般我們用來(lái)指定發(fā)送的類型常用值是JSON類型,也就是"application/json",為什么常用JSON類型呢?你想想,當(dāng)我們要發(fā)送多個(gè)值的時(shí)候,如果一個(gè)一個(gè)參數(shù)的去組織,那將是多么麻煩呀,而且服務(wù)端拿到數(shù)據(jù)后,還要我們一個(gè)一個(gè)的將數(shù)據(jù)從request.parameter里面拿出來(lái),非常的浪費(fèi)時(shí)間,所以,利用JSON,可以將數(shù)據(jù)先寫成JSON格式,再傳到后端,后端會(huì)自動(dòng)解析,自動(dòng)將數(shù)據(jù)填入對(duì)應(yīng)的POJO,非常方便,
但是要做到這些,我們需要以下配置:
(1)設(shè)置content-type 為 "application/json" ,目的是告訴服務(wù)端傳過(guò)來(lái)的是JSON
(2)用JSON.stringify將數(shù)據(jù)轉(zhuǎn)換成JSON字符串再傳送
(3)服務(wù)端Controller需要在方法的參數(shù)前用@requestBody,這樣服務(wù)端就會(huì)調(diào)用相應(yīng)的解析器,將請(qǐng)求解析
到這里我們一個(gè)完整的請(qǐng)求就完成啦!看完了請(qǐng)求,接下來(lái)我們?cè)倏错憫?yīng),ajax接受響應(yīng)的函數(shù)如下:
xmlhttp.onreadystatechange=function() //自動(dòng)調(diào)用 { if (xmlhttp.readyState==4 && xmlhttp.status==200) { xmlDoc=xmlhttp.responseXML; //獲得值 } }
Ajax在接收到響應(yīng)之后,會(huì)自動(dòng)調(diào)用 onreadystatechange
方法,然后通過(guò)responseXML獲取返回值,那么我們就會(huì)遇到一個(gè)問(wèn)題:在Spring MVC中,返回值會(huì)寫到ModelAndView中,然后查找到視圖,將數(shù)據(jù)渲染到視圖中,不能達(dá)到我們要的效果,即返回?cái)?shù)據(jù)而不指定視圖,所以我們要用到@responseBody
聲明@requestBody后,返回值如果是字符串則直接將字符串寫到客戶端,假如是一個(gè)對(duì)象,此時(shí)會(huì)將對(duì)象轉(zhuǎn)化為JSON串然后寫到客戶端。這里需要注意的是,如果返回對(duì)象,按utf-8編碼。如果返回String,默認(rèn)按iso8859-1編碼,頁(yè)面可能出現(xiàn)亂碼。因此在注解中我們可以手動(dòng)修改編碼格式,例如@RequestMapping(value="/cat/query",produces="text/html;charset=utf-8"),
前面是請(qǐng)求的路徑,后面是編碼格式。在客戶端,獲得JSON字符串以后,可以利用JSON.parse()將響應(yīng)轉(zhuǎn)換為json對(duì)象,方便使用
一個(gè)實(shí)例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">確認(rèn)密碼</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>
表單通過(guò)失去焦點(diǎn)的onblur觸發(fā)器觸發(fā)檢查的 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(); //執(zhí)行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檢測(cè)用戶輸入是否為空,然后若不為空,則執(zhí)行Ajax代碼,檢查賬號(hào)是否已經(jīng)被占用,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; //設(shè)置反饋信息 } } var name = document.getElementById("exampleInputEmail1").value; //獲取用戶輸入 xmlhttp.open("GET","userController/checkInfo.do?username="+name,true); //構(gòu)造請(qǐng)求 xmlhttp.send(); //發(fā)送 }
最后看看Controller的代碼:
@RequestMapping(value="/checkInfo",produces={"text/html;charset=utf-8;"}) //設(shè)置編碼 @ResponseBody //設(shè)置響應(yīng)轉(zhuǎn)換為JSON public String check(HttpServletRequest requst) { String username = requst.getParameter("username"); System.out.println(username); Integer id = userService.check(username); //檢查賬號(hào)是否已經(jīng)存在 if (id!=null) { 9 return "賬號(hào)已經(jīng)存在"; }else { return ""; } }
成果展示:
利用js提醒密碼不能為空
利用ajax檢測(cè)賬號(hào)是否重復(fù),以及利用JS檢測(cè)前后密碼是否一致
總結(jié)
以上所述是小編給大家介紹的Spring MVC+ajax進(jìn)行信息驗(yàn)證的方法,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)我們網(wǎng)站的支持!
如果你覺(jué)得本文對(duì)你有幫助,歡迎轉(zhuǎn)載,煩請(qǐng)注明出處,謝謝!
上一篇:解決Ajax方式上傳文件報(bào)錯(cuò)"Uncaught TypeError: Illegal invocati
欄 目:AJAX相關(guān)
下一篇:使用AJAX(包含正則表達(dá)式)驗(yàn)證用戶登錄的步驟
本文標(biāo)題:Spring MVC+ajax進(jìn)行信息驗(yàn)證的方法
本文地址:http://mengdiqiu.com.cn/a1/AJAXxiangguan/11266.html


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-11layui的checbox在Ajax局部刷新下的設(shè)置方
- 01-11ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹
- 01-11ajax獲得json對(duì)象數(shù)組 循環(huán)輸出數(shù)據(jù)的
- 01-11解決ajax請(qǐng)求后臺(tái),有時(shí)收不到返回值的
- 01-11詳談ajax返回?cái)?shù)據(jù)成功 卻進(jìn)入error的方
- 01-11解決AJAX返回狀態(tài)200沒(méi)有調(diào)用success的問(wèn)
- 01-11快速解決ajax返回值給外部函數(shù)的問(wèn)題
- 01-11Ajax實(shí)現(xiàn)動(dòng)態(tài)顯示并操作表信息的方法
- 01-11ajax實(shí)現(xiàn)從后臺(tái)拿數(shù)據(jù)顯示在HTML前端的
- 01-11ajax動(dòng)態(tài)查詢數(shù)據(jù)庫(kù)數(shù)據(jù)并顯示在前臺(tái)
隨機(jī)閱讀
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 04-02jquery與jsp,用jquery
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?