原生js中ajax訪問的實(shí)例詳解
原生js中ajax訪問的實(shí)例詳解
form表單中
登錄名:
失去光標(biāo)即觸發(fā)事件
function createXmlHttp() { var xmlHttp; try { // Firefox, Opera 8.0+, Safari xmlHttp = new XMLHttpRequest(); } catch (e) { try {// Internet Explorer xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } return xmlHttp; } function infoCheck(){ var ename=document.getElementById("ename").value; var password=document.getElementById("password").value; var pwdConfirm=document.getElementById("pwdConfirm").value; if(password!=pwdConfirm){ alert("兩次密碼不統(tǒng)一"); return ; } //驗(yàn)證登錄用戶名是否存在,類似的可以驗(yàn)證手機(jī)號(hào)什么的 // 1.創(chuàng)建異步對(duì)象 var xhr = createXmlHttp(); xhr.onreadystatechange = function () { if (xhr.readyState === 4 && xhr.status === 200) { // var data = new Function("return" + xhr.responseText)()//反序列化 var val=xhr.responseText; if(val==1){ document.getElementById("ch").innerHTML="重新設(shè)置名字"; document.getElementById("ename").focus(); return; }else{ document.getElementById("ch").innerHTML=""; } } } xhr.open("post", 'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)), true); //發(fā)送 xhr.send(null); }
在返回xhr.responseText數(shù)據(jù)時(shí),中文有亂碼的體現(xiàn),尚未解決,所以為了只管體現(xiàn),我讓后臺(tái)返回的是“0”或者“1”來做判斷,je中createXmlHttp()這個(gè)方法以前看老師講過,但是還是不理解,目前仿照這寫吧,功能實(shí)現(xiàn)了,這也是看到的最簡單的版本實(shí)現(xiàn)原生態(tài)ajax,整個(gè)ajax訪問流程還是比較好理解,提交訪問數(shù)據(jù)的時(shí)候也存在亂碼問題
web項(xiàng)目亂碼的問題解決方案
開始的web項(xiàng)目整體以post方式提交,xml文件中加入以下編碼過濾器
<filter> <filter-name>encodingFilter</filter-name> <filter-class> org.springframework.web.filter.CharacterEncodingFilter </filter-class> <init-param> <param-name>encoding</param-name> <param-value>utf-8</param-value> </init-param> <init-param> <param-name>forceEncoding</param-name> <param-value>true</param-value> </init-param> </filter> <filter-mapping> <filter-name>encodingFilter</filter-name> <url-pattern>/*</url-pattern> </filter-mapping> 提交的時(shí)候 剩下的 小部分的亂碼可以用編碼在解碼的方式獲得正確數(shù)據(jù) 編碼:'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)) 解碼:try { String str=URLDecoder.decode(ename, "utf-8"); ename=URLDecoder.decode(ename, "utf-8"); } catch (UnsupportedEncodingException e) { e.printStackTrace(); } 后面寫入數(shù)據(jù)庫的時(shí)候亂碼問題,我個(gè)人先創(chuàng)數(shù)據(jù)庫編碼是utf8,項(xiàng)目的編碼也是utf-8,避免其他的編碼問題發(fā)生,在連接數(shù)據(jù)庫的URL也加上 url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8 目前碰到的亂碼問題已經(jīng)解決(除開ajax返回?cái)?shù)據(jù)亂碼,這個(gè)目前沒找到解決方案)
在來說下原生js非空驗(yàn)證和button點(diǎn)擊提交功能
<form action="LoginController/register" method="post" id="form"> 姓名:<input type="text" name="name" id="name"><br> 登錄名:<input type="text" name="ename" id="ename" onblur="infoCheck()"> <font id="ch" name="ch"></font><br> 密碼:<input type="password" name="password" id="password"><br> 密碼確定:<input type="password" name="pwdConfirm" id="pwdConfirm"><br> <input type="button" value="注冊(cè)" onclick="submitInfo()" > </form> function submitInfo(){ var name=document.getElementById("name").value; var ename=document.getElementById("ename").value; var password=document.getElementById("password").value; var pwdConfirm=document.getElementById("pwdConfirm").value; //針對(duì)空格和制表符的""能做到過濾 name=name.replace(/(^\s*)|(\s*$)/g, ""); ename=ename.replace(/(^\s*)|(\s*$)/g, ""); password=password.replace(/(^\s*)|(\s*$)/g, ""); pwdConfirm=pwdConfirm.replace(/(^\s*)|(\s*$)/g, ""); if(name.length==0||name==" "||name.langth=="undefined") { //alert(name.langth); //alert(111); alert("姓名為必填項(xiàng)"); return ; } if(ename.length==0||ename==" "||ename.langth=="undefined") { alert("登錄名為必填項(xiàng)"); return ; } if(password.length==0||password==" "||password.langth=="undefined") { alert("密碼為必填項(xiàng)"); return; } if(password!=pwdConfirm){ alert("兩次密碼不統(tǒng)一"); return ; } document.getElementById("form").submit(); }
后面繼續(xù)加瓦,完善,所有代碼在之前的基于注解spring4.,mybatis3.最簡單的SSM整合 連接地址中,代碼持續(xù)更新
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會(huì)跳過稀疏數(shù)組中缺少的元素,它的返回?cái)?shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關(guān)知識(shí),需要的朋友參考下2018-02-02Express框架中_router?對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解
這篇文章主要為大家介紹了Express框架中_router的對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03js控制當(dāng)再次點(diǎn)擊按鈕時(shí)的間隔時(shí)間
這篇文章主要介紹通過js如何控制當(dāng)再次點(diǎn)擊按鈕是的間隔時(shí)間,需要的朋友可以參考下2014-06-06JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗(yàn)證碼腳本實(shí)例
除了普通的可點(diǎn)擊更換的四位驗(yàn)證碼實(shí)現(xiàn),我們這里還展示了更進(jìn)一步的JavaScript編寫帶旋轉(zhuǎn)+線條干擾的驗(yàn)證碼腳本實(shí)例,需要的朋友可以參考下2016-05-05JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
本篇文章主要是對(duì)JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼進(jìn)行了介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2014-02-02layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法
今天小編就為大家分享一篇layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09js通過更改按鈕的顯示樣式實(shí)現(xiàn)按鈕的滑動(dòng)效果
使用js實(shí)現(xiàn)按鈕的滑動(dòng)效果,通過更改按鈕的顯示樣式,來實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng),需要的朋友可以參考下2014-04-04利用BootStrap彈出二級(jí)對(duì)話框的簡單實(shí)現(xiàn)方法
彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再彈出一個(gè)對(duì)話框.這篇文章主要介紹了利用BootStrap彈出二級(jí)對(duì)話框的簡單實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-09-09