原生js中ajax访问的实例详解
原生js中ajax访问的实例详解
form表单中
登录名:
失去光标即触发事件
functioncreateXmlHttp(){ varxmlHttp; try{//Firefox,Opera8.0+,Safari xmlHttp=newXMLHttpRequest(); } catch(e){ try{//InternetExplorer xmlHttp=newActiveXObject("Msxml2.XMLHTTP"); } catch(e){ try{ xmlHttp=newActiveXObject("Microsoft.XMLHTTP"); } catch(e){} } } returnxmlHttp; } functioninfoCheck(){ varename=document.getElementById("ename").value; varpassword=document.getElementById("password").value; varpwdConfirm=document.getElementById("pwdConfirm").value; if(password!=pwdConfirm){ alert("两次密码不统一"); return; } //验证登录用户名是否存在,类似的可以验证手机号什么的 //1.创建异步对象 varxhr=createXmlHttp(); xhr.onreadystatechange=function(){ if(xhr.readyState===4&&xhr.status===200){ //vardata=newFunction("return"+xhr.responseText)()//反序列化 varval=xhr.responseText; if(val==1){ document.getElementById("ch").innerHTML="重新设置名字"; document.getElementById("ename").focus(); return; }else{ document.getElementById("ch").innerHTML=""; } } } xhr.open("post",'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)),true); //发送 xhr.send(null); }
在返回xhr.responseText数据时,中文有乱码的体现,尚未解决,所以为了只管体现,我让后台返回的是“0”或者“1”来做判断,je中createXmlHttp()这个方法以前看老师讲过,但是还是不理解,目前仿照这写吧,功能实现了,这也是看到的最简单的版本实现原生态ajax,整个ajax访问流程还是比较好理解,提交访问数据的时候也存在乱码问题
web项目乱码的问题解决方案
开始的web项目整体以post方式提交,xml文件中加入以下编码过滤器
encodingFilter org.springframework.web.filter.CharacterEncodingFilter encoding utf-8 forceEncoding true 提交的时候 剩下的小部分的乱码可以用编码在解码的方式获得正确数据 编码:'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)) 解码:try{ Stringstr=URLDecoder.decode(ename,"utf-8"); ename=URLDecoder.decode(ename,"utf-8"); }catch(UnsupportedEncodingExceptione){ e.printStackTrace(); } 后面写入数据库的时候乱码问题,我个人先创数据库编码是utf8,项目的编码也是utf-8,避免其他的编码问题发生,在连接数据库的URL也加上 url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8 目前碰到的乱码问题已经解决(除开ajax返回数据乱码,这个目前没找到解决方案) encodingFilter /*
在来说下原生js非空验证和button点击提交功能
姓名:
登录名:
密码:
密码确定:
functionsubmitInfo(){ varname=document.getElementById("name").value; varename=document.getElementById("ename").value; varpassword=document.getElementById("password").value; varpwdConfirm=document.getElementById("pwdConfirm").value; //针对空格和制表符的""能做到过滤 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("姓名为必填项"); return; } if(ename.length==0||ename==""||ename.langth=="undefined"){ alert("登录名为必填项"); return; } if(password.length==0||password==""||password.langth=="undefined"){ alert("密码为必填项"); return; } if(password!=pwdConfirm){ alert("两次密码不统一"); return; } document.getElementById("form").submit(); }
后面继续加瓦,完善,所有代码在之前的基于注解spring4.,mybatis3.最简单的SSM整合连接地址中,代码持续更新
如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!