この記事では、ネイティブ 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", 'LoginController/checkEname?ename='+escape(encodeURIComponent(ename)), true); //发送 xhr.send(null); }
xhr.responseTextデータを返す際、中国語が文字化けします 性能がまだ解決していないので、それを反映させるだけのために背景に「0」か「1」を返して判断させています jeのcreateXmlHttp()メソッドは先生に教えてもらいました。これは、私が見た中で最も単純なバージョンの ajax アクセスプロセス全体を実装したものです。アクセスデータの送信時に文字化けの問題もあります
Webプロジェクトの文字化け問題の解決策
開始 Webプロジェクトは全体としてポストモードで送信され、以下のエンコードフィルターが追加されます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 の非 null 検証とボタンのクリック送信機能について話しましょう
<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. に基づくアドレス、コードは継続的に更新されます
関連する推奨事項:
Ajax_jquery を介して XML データにアクセスする Jquery の小さな例
javascript - がある場合ページ上で複数の Ajax アクセスのバックグラウンドがありますが、現時点ではバックグラウンドはシングルスレッドですか?またはマルチスレッド
以上がjsでのajaxアクセスの詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。