原生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 相关文章推荐
IE7中javascript操作CheckBox的checked=true不打勾的解决方法
Dec 07 Javascript
使用JSON.parse将json字符串转换成json对象的时候会出错
Sep 04 Javascript
form.submit()不能提交表单的错误原因及解决方法
Oct 13 Javascript
js实现带缓冲效果的仿QQ面板折叠菜单代码
Sep 06 Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 Javascript
解决jquery中动态新增的元素节点无法触发事件问题的两种方法
Oct 30 Javascript
jQuery基于ajax()使用serialize()提交form数据的方法
Dec 08 Javascript
BootStrap 实现各种样式的进度条效果
Dec 07 Javascript
详解Vue iview IE浏览器不兼容报错(Iview Bable polyfill)
Jan 07 Javascript
egg.js的基本使用和调用数据库的方法示例
May 18 Javascript
Vue v-bind动态绑定class实例方法
Jan 15 Javascript
Vue自定义render统一项目组弹框功能
Jun 07 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
欧美媒体选出10年前最流行的17部动画
2017/01/18 日漫
php在线打包程序源码
2008/07/27 PHP
一个PHP数组应该有多大的分析
2009/07/30 PHP
php处理json时中文问题的解决方法
2011/04/12 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
jsTree树控件(基于jQuery, 超强悍)[推荐]
2009/09/01 Javascript
分享XmlHttpRequest调用Webservice的一点心得
2012/07/20 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
基于socket.io+express实现多房间聊天
2016/03/17 Javascript
Jquery删除css属性的简单方法
2016/12/04 Javascript
实现JavaScript高性能的数据存储
2016/12/11 Javascript
使用jQuery实现动态添加小广告
2017/07/11 jQuery
Nuxt.js实现校验访问浏览器类型的中间件
2018/08/24 Javascript
js for终止循环 跳出多层循环
2018/10/04 Javascript
bootstrap table实现合并单元格效果
2018/12/24 Javascript
关于element-ui的隐藏组件el-scrollbar的使用
2019/05/29 Javascript
React Hooks 实现和由来以及解决的问题详解
2020/01/17 Javascript
Vant 在vue-cli 4.x中按需加载操作
2020/11/05 Javascript
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Django框架创建mysql连接与使用示例
2019/07/29 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
深入浅析Python科学计算库Scipy及安装步骤
2019/10/12 Python
PyTorch 对应点相乘、矩阵相乘实例
2019/12/27 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
商场促销活动总结
2014/07/10 职场文书
优秀中职教师事迹材料
2014/08/26 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
机动车登记业务委托书
2014/10/08 职场文书
2015年营销工作总结范文
2015/04/23 职场文书
幼儿园教师暑期培训心得体会
2016/01/09 职场文书
2019大学生预备党员转正思想汇报
2019/06/21 职场文书
如何用JavaScript实现一个数组惰性求值库
2021/05/05 Javascript
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python