真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

怎么在SpringMVC中利用ajax進(jìn)行信息驗(yàn)證

本篇文章為大家展示了怎么在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:

 表單如下:


  
    用戶名
    
  
       密碼        
       確認(rèn)密碼        
  提交

 表單通過(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è)資訊頻道。


文章題目:怎么在SpringMVC中利用ajax進(jìn)行信息驗(yàn)證
網(wǎng)頁(yè)地址:http://weahome.cn/article/ispcih.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部