原生js中ajax访问的实例详解


Posted in Javascript onSeptember 19, 2017

原生js中ajax访问的实例详解

form表单中

登录名:

失去光标即触发事件

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("两次密码不统一");
      return ;
    }
    //验证登录用户名是否存在,类似的可以验证手机号什么的
    // 1.创建异步对象 
    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="重新设置名字";
          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文件中加入以下编码过滤器

<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>

   提交的时候
   剩下的 小部分的乱码可以用编码在解码的方式获得正确数据
   编码:'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();
    }
    后面写入数据库的时候乱码问题,我个人先创数据库编码是utf8,项目的编码也是utf-8,避免其他的编码问题发生,在连接数据库的URL也加上
url=jdbc:mysql://localhost:3306/ssm?useUnicode=true&characterEncoding=utf8
目前碰到的乱码问题已经解决(除开ajax返回数据乱码,这个目前没找到解决方案)

在来说下原生js非空验证和button点击提交功能

<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="注册" 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;
    //针对空格和制表符的""能做到过滤
    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整合 连接地址中,代码持续更新

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
网页整体变灰白色(兼容各浏览器)实例
Apr 21 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
Vue.js每天必学之指令系统与自定义指令
Sep 07 Javascript
jQuery常用样式操作实例分析(获取、设置、追加、删除、判断等)
Sep 08 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
Jun 04 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
Angular2 父子组件通信方式的示例
Jan 29 Javascript
JavaScript类的继承多种实现方法
May 30 Javascript
vue抽出组件并传值实例
Jul 31 Javascript
angularjs实现过滤并替换关键字小功能
Sep 19 #Javascript
详解vue-cli与webpack结合如何处理静态资源
Sep 19 #Javascript
前端常见跨域解决方案(全)
Sep 19 #Javascript
详解.vue文件中监听input输入事件(oninput)
Sep 19 #Javascript
JavaScript数组去重的多种方法(四种)
Sep 19 #Javascript
一步步教你利用Canvas对图片进行处理
Sep 19 #Javascript
vue2.0开发入门笔记之.vue文件的生成和使用
Sep 19 #Javascript
You might like
几道坑人的PHP面试题 试试看看你会不会也中招
2014/08/19 PHP
JavaScript 获取事件对象的注意点
2009/07/29 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
JS替换文本域内的回车示例
2014/02/18 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
js+html5实现可在手机上玩的拼图游戏
2015/07/17 Javascript
非常实用的js验证框架实现源码 附原理方法
2016/06/08 Javascript
Angular的$http的ajax的请求操作(推荐)
2017/01/10 Javascript
Angular directive递归实现目录树结构代码实例
2017/05/05 Javascript
JS运动特效之链式运动分析
2018/01/24 Javascript
vue实现个人信息查看和密码修改功能
2018/05/06 Javascript
vue.js2.0 实现better-scroll的滚动效果实例详解
2018/08/13 Javascript
vue-cli 2.*中导入公共less文件的方法步骤
2018/11/22 Javascript
一次Webpack配置文件的分离实战记录
2018/11/30 Javascript
微信小程序学习笔记之获取位置信息操作图文详解
2019/03/29 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
vue实现桌面向网页拖动文件的示例代码(可显示图片/音频/视频)
2021/03/01 Vue.js
python3访问sina首页中文的处理方法
2014/02/24 Python
python去除文件中空格、Tab及回车的方法
2016/04/12 Python
python3.5使用tkinter制作记事本
2016/06/20 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
基于Python中capitalize()与title()的区别详解
2017/12/09 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
python GUI库图形界面开发之PyQt5计数器控件QSpinBox详细使用方法与实例
2020/02/28 Python
西班牙在线药店:DosFarma
2020/03/28 全球购物
Belvilla法国:休闲度假房屋出租
2020/10/03 全球购物
Zatchels官网:英国剑桥包品牌
2021/01/12 全球购物
普天C++笔试题
2016/03/20 面试题
如何写一份好的自荐信
2014/01/02 职场文书
爱情保证书范文
2014/02/01 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
暑期社会实践个人总结
2015/03/06 职场文书
Java用自带的Image IO给图片添加水印
2021/06/15 Java/Android
Vue全局事件总线你了解吗
2022/02/24 Vue.js