AJAX使用前端校验用户名是否已被使用------AJAX

淡淡的烟草味﹌ 2024-02-18 10:13 35阅读 0赞

>     <!DOCTYPE html>
>     <html lang="en" id="myHtml">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>HtmlAll</title>
>     </head>
>     <body>
>     <script type="text/javascript">
>         window.onload = function()
>         {
>             document.getElementById("username").onblur = function()
>             {
>                 var value = document.getElementById("username").value;
>                 var ajax = new XMLHttpRequest();
>                 ajax.onreadystatechange = function()
>                 {
>                     if(ajax.readyState === 4)
>                     {
>                         if(ajax.status === 200)
>                         {
>                             if(ajax.responseText === "该用户名已被使用")
>                             {
>                                 document.getElementById("usernameError").innerHTML = ajax.responseText;
>                             }
>                             else
>                             {
>                                 document.getElementById("usernameError").innerHTML = "可用该用户名";
>                             }
>                         }
>                         else
>                         {
>                             alert(ajax.status);
>                         }
>                     }
>                 }
>                 ajax.open("POST","/ajax/ajaxRequestTest",true);
>                 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>                 ajax.send("username=" + value);
>             }
>         }
>     </script>
>     <table align="center">
>         <form>
>             <tr align="center">
>                 <th>用户名</th>
>                 <th><input type="text" name="username" id="username"/></th>
>                 <th id="usernameError" style="color: red;"></th>
>             </tr>
>             <tr align="center">
>                 <th>邮箱</th>
>                 <th><input type="email" name="username" id="email"/></th>
>             </tr>
>             <tr align="center">
>                 <th>密码</th>
>                 <th><input type="password" name="username" id="password1"/></th>
>             </tr>
>             <tr align="center">
>                 <th>确认密码</th>
>                 <th><input type="password" name="username" id="password2"/></th>
>             </tr>
>             <tr>
>                 <th>登录或重置</th>
>                 <th>
>                     <input type="submit" name="submit" id="登录"/>
>                     <input type="reset" name="reset" id="重置"/>
>                 </th>
>             </tr>
>         </form>
>     </table>
>     <div id="myDiv"></div>
>     </body>
>     </html>
> 
>     <!DOCTYPE html>
>     <html lang="en" id="myHtml">
>     <head>
>         <meta charset="UTF-8">
>         <meta name="viewport" content="width=device-width, initial-scale=1.0">
>         <title>HtmlAll</title>
>     </head>
>     <body>
>     <script type="text/javascript">
>         window.onload = function()
>         {
>             document.getElementById("username").onblur = function()
>             {
>                 var value = document.getElementById("username").value;
>                 var ajax = new XMLHttpRequest();
>                 ajax.onreadystatechange = function()
>                 {
>                     if(ajax.readyState === 4)
>                     {
>                         if(ajax.status === 200)
>                         {
>                             if(ajax.responseText === "该用户名已被使用")
>                             {
>                                 document.getElementById("usernameError").innerHTML = ajax.responseText;
>                             }
>                             else
>                             {
>                                 document.getElementById("usernameError").innerHTML = "可用该用户名";
>                             }
>                         }
>                         else
>                         {
>                             alert(ajax.status);
>                         }
>                     }
>                 }
>                 ajax.open("POST","/ajax/ajaxRequestTest",true);
>                 ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
>                 ajax.send("username=" + value);
>             }
>         }
>     </script>
>     <table align="center">
>         <form>
>             <tr align="center">
>                 <th>用户名</th>
>                 <th><input type="text" name="username" id="username"/></th>
>                 <th id="usernameError" style="color: red;"></th>
>             </tr>
>             <tr align="center">
>                 <th>邮箱</th>
>                 <th><input type="email" name="username" id="email"/></th>
>             </tr>
>             <tr align="center">
>                 <th>密码</th>
>                 <th><input type="password" name="username" id="password1"/></th>
>             </tr>
>             <tr align="center">
>                 <th>确认密码</th>
>                 <th><input type="password" name="username" id="password2"/></th>
>             </tr>
>             <tr>
>                 <th>登录或重置</th>
>                 <th>
>                     <input type="submit" name="submit" id="登录"/>
>                     <input type="reset" name="reset" id="重置"/>
>                 </th>
>             </tr>
>         </form>
>     </table>
>     <div id="myDiv"></div>
>     </body>
>     </html>