Detailliertes Beispiel für Ajax-Zugriff in js

Dieser Artikel stellt Ihnen hauptsächlich relevante Informationen zur detaillierten Erläuterung von Ajax-Zugriffsbeispielen in nativem JS vor. Ich hoffe, dass Sie diesen Teil des Inhalts beherrschen und verstehen können Ich hoffe, es kann allen helfen.

Detaillierte Erläuterung von Beispielen für Ajax-Zugriff in nativem js

Im Formular

Anmeldename:

Das Ereignis wird ausgelöst, wenn der Cursor verloren geht

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

Bei der Rückgabe der xhr.responseText-Daten weist der Chinese eine verstümmelte Leistung auf, was noch nicht der Fall war gelöst, also lasse ich den Hintergrund „0“ oder „1“ zur Beurteilung zurückgeben. Die Methode createXmlHttp() wurde mir schon einmal beigebracht, aber ich verstehe sie jetzt immer noch nicht Ich werde es so schreiben. Dies ist auch das einfachste, was ich je gesehen habe. Der gesamte Ajax-Zugriffsprozess ist auch relativ einfach zu verstehen Zugriffsdaten

Lösung für das Problem verstümmelter Zeichen in Webprojekten

Starten Sie das Web. Das gesamte Projekt wird im Post-Modus übermittelt und die folgenden Kodierungsfilter werden zur XML-Datei hinzugefügt

  <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返回数据乱码，这个目前没找到解决方案）

Lassen Sie uns über die native js-Nicht-Leer-Überprüfung und die Schaltflächenklick-Sendenfunktionen sprechen

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

Weitere Kacheln hinzufügen und verbessern, alle Codes befinden sich im vorherigen annotationsbasierten Spring4., mybatis3. Die einfachste SSM-Integrationsverbindungsadresse, der Code wird kontinuierlich aktualisiert

Verwandte Empfehlungen:

Ein kleines Beispiel für den Zugriff von Jquery auf XML-Daten über Ajax_jquery

Ajax-Zugriffsoptimierung im MVVM-Modus

Javascript – Falls vorhanden Gibt es mehrere Ajax-Zugriffe auf den Hintergrund auf einer Seite? Ist der Hintergrund derzeit Single-Threaded? Oder Multithreading

Das obige ist der detaillierte Inhalt vonDetailliertes Beispiel für Ajax-Zugriff in js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!