本篇文章為大家展示了怎么在Spring MVC中利用ajax進(jìn)行信息驗(yàn)證,內(nèi)容簡(jiǎn)明扼要并且容易理解,絕對(duì)能使你眼前一亮,通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。
站在用戶的角度思考問(wèn)題,與客戶深入溝通,找到襄城網(wǎng)站設(shè)計(jì)與襄城網(wǎng)站推廣的解決方案,憑借多年的經(jīng)驗(yàn),讓設(shè)計(jì)與互聯(lián)網(wǎng)技術(shù)結(jié)合,創(chuàng)造個(gè)性化、用戶體驗(yàn)好的作品,建站類型包括:成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣、國(guó)際域名空間、網(wǎng)站空間、企業(yè)郵箱。業(yè)務(wù)覆蓋襄城地區(qū)。
主要的方法有兩種:
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:
表單如下:
表單通過(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 ""; } }
上述內(nèi)容就是怎么在Spring MVC中利用ajax進(jìn)行信息驗(yàn)證,你們學(xué)到知識(shí)或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。