原生js中ajax訪問(wèn)的實(shí)例詳解
原生js中ajax訪問(wèn)的實(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”來(lái)做判斷,je中createXmlHttp()這個(gè)方法以前看老師講過(guò),但是還是不理解,目前仿照這寫(xiě)吧,功能實(shí)現(xiàn)了,這也是看到的最簡(jiǎn)單的版本實(shí)現(xiàn)原生態(tài)ajax,整個(gè)ajax訪問(wèn)流程還是比較好理解,提交訪問(wèn)數(shù)據(jù)的時(shí)候也存在亂碼問(wèn)題
web項(xiàng)目亂碼的問(wèn)題解決方案
開(kāi)始的web項(xiàng)目整體以post方式提交,xml文件中加入以下編碼過(guò)濾器
<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();
}
后面寫(xiě)入數(shù)據(jù)庫(kù)的時(shí)候亂碼問(wèn)題,我個(gè)人先創(chuàng)數(shù)據(jù)庫(kù)編碼是utf8,項(xiàng)目的編碼也是utf-8,避免其他的編碼問(wèn)題發(fā)生,在連接數(shù)據(jù)庫(kù)的URL也加上
url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8
目前碰到的亂碼問(wèn)題已經(jīng)解決(除開(kāi)ajax返回?cái)?shù)據(jù)亂碼,這個(gè)目前沒(méi)找到解決方案)
在來(lái)說(shuō)下原生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ì)空格和制表符的""能做到過(guò)濾
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.最簡(jiǎn)單的SSM整合 連接地址中,代碼持續(xù)更新
如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- Struts2.5 利用Ajax將json數(shù)據(jù)傳值到JSP的實(shí)例
- JavaScript 通過(guò)Ajax 動(dòng)態(tài)加載CheckBox復(fù)選框
- 淺談Vue.js應(yīng)用的四種AJAX請(qǐng)求數(shù)據(jù)模式
- 基于jstree使用AJAX請(qǐng)求獲取數(shù)據(jù)形成樹(shù)
- JavaScript使用Ajax上傳文件的示例代碼
- vuejs使用FormData實(shí)現(xiàn)ajax上傳圖片文件
- JS+Ajax實(shí)現(xiàn)百度智能搜索框
- js如何編寫(xiě)簡(jiǎn)單的ajax方法庫(kù)
相關(guān)文章
JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組
Array filter() 方法會(huì)跳過(guò)稀疏數(shù)組中缺少的元素,它的返回?cái)?shù)組總是稠密的。這篇文章給大家介紹了JavaScript中利用Array filter() 方法壓縮稀疏數(shù)組的相關(guān)知識(shí),需要的朋友參考下2018-02-02
Express框架中_router?對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解
這篇文章主要為大家介紹了Express框架中_router的對(duì)象數(shù)據(jù)結(jié)構(gòu)使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03
js控制當(dāng)再次點(diǎn)擊按鈕時(shí)的間隔時(shí)間
這篇文章主要介紹通過(guò)js如何控制當(dāng)再次點(diǎn)擊按鈕是的間隔時(shí)間,需要的朋友可以參考下2014-06-06
JavaScript編寫(xiě)帶旋轉(zhuǎn)+線條干擾的驗(yàn)證碼腳本實(shí)例
除了普通的可點(diǎn)擊更換的四位驗(yàn)證碼實(shí)現(xiàn),我們這里還展示了更進(jìn)一步的JavaScript編寫(xiě)帶旋轉(zhuǎn)+線條干擾的驗(yàn)證碼腳本實(shí)例,需要的朋友可以參考下2016-05-05
JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼
本篇文章主要是對(duì)JS實(shí)現(xiàn)仿百度輸入框自動(dòng)匹配功能的示例代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02
layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法
今天小編就為大家分享一篇layui: layer.open加載窗體時(shí)出現(xiàn)遮罩層的解決方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
js通過(guò)更改按鈕的顯示樣式實(shí)現(xiàn)按鈕的滑動(dòng)效果
使用js實(shí)現(xiàn)按鈕的滑動(dòng)效果,通過(guò)更改按鈕的顯示樣式,來(lái)實(shí)現(xiàn)按鈕動(dòng)態(tài)滑動(dòng),需要的朋友可以參考下2014-04-04
利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法
彈出二級(jí)對(duì)話框,即在對(duì)話框的基礎(chǔ)上再?gòu)棾鲆粋€(gè)對(duì)話框.這篇文章主要介紹了利用BootStrap彈出二級(jí)對(duì)話框的簡(jiǎn)單實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2016-09-09

