js의 Ajax 액세스에 대한 자세한 예-JS 튜토리얼-php.cn

js의 Ajax 액세스에 대한 자세한 예

小云云

풀어 주다： 2018-02-08 11:24:42

원래의

1288명이 탐색했습니다.

이 글은 기본 js에서의 ajax 접근 예제에 대한 관련 정보를 주로 소개하고 있으니, 이 글을 통해 이 부분을 숙지하시고, 필요한 친구들이 참고하시면 좋겠습니다. 그것은 모두에게 도움이 될 수 있습니다.

네이티브 js의 Ajax 액세스 예제에 대한 자세한 설명

양식 양식

로그인 이름:

커서가 손실되면 이벤트가 트리거됩니다.

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", &#39;LoginController/checkEname?ename=&#39;+escape(encodeURIComponent(ename)), true);  
    //发送 
    xhr.send(null); 
  }

로그인 후 복사

xhr.responseText 데이터를 반환할 때, 중국어가 깨졌네요 아직 성능이 해결되지 않아서 반영만 하려고 배경을 "0"이나 "1"로 돌려보내서 판단하도록 했습니다. 이전에는 아직 이해가 되지 않습니다. 이제 이렇게 작성하겠습니다. 함수가 구현되었습니다. 이것은 또한 전체 Ajax 액세스 프로세스를 구현하는 데 본 것 중 가장 간단한 버전입니다. 이해합니다. 액세스 데이터를 제출할 때 문자가 깨지는 문제도 있습니다.

웹 프로젝트에서 문자가 깨지는 문제에 대한 해결 방법

시작 웹 프로젝트가 포스트 모드에서 전체적으로 제출됩니다. 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>

   提交的时候
   剩下的 小部分的乱码可以用编码在解码的方式获得正确数据
   编码:&#39;LoginController/checkEname?ename=&#39;+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가 비어 있지 않은 확인 및 버튼 클릭 제출 기능에 대해 이야기해 보겠습니다.

<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();
  }

로그인 후 복사

계속 타일을 추가하고 나중에 개선하세요. 모든 코드는 다음을 기반으로 하는 이전의 가장 간단한 SSM 통합 연결 주소에 있습니다. 주석 spring4., mybatis3., 코드가 지속적으로 업데이트됩니다