<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            AJAX檢測用戶名是否存在的方法

             更新時間:2020年12月27日 11:04:27   作者:予傾  
            這篇文章主要為大家詳細介紹了AJAX檢測用戶名是否存在,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

            本文實例為大家分享了AJAX檢測用戶名是否存在的具體代碼,供大家參考,具體內容如下

            vscode:

            index:

            <!DOCTYPE html>
            <html lang="en">
            <head>
             <meta charset="UTF-8">
             <title>Title</title>
            </head>
            <body>
             <h2>用戶注冊</h2>
             <form action="/doreg" method="post">
              <ul>
               <li>用戶名:<input type="text" name="username" id="user"><span id="msg"></span></li>
               <li>密碼:<input type="text" name="pwd"></li>
               <li>確認密碼:<input type="text" name="repwd"></li>
               <li><input type="submit" value="注冊"></li>
              </ul>
             </form>
             <script>
              let user = document.querySelector("#user")
              let msg = document.querySelector("#msg")
              user.onblur = function(){
               // alert("hello")
               // 第一步:創建一個ajax對象
               let xhr = new XMLHttpRequest(); // xhr表示ajax對象 此時ajax的狀態是0
               // console.log(xhr.readyState)
               // 第二步:和服務器建立連接 get表示需要把數據放在url中
               xhr.open("get","/check?username="+user.value)// 此時ajax的狀態是1
               // console.log(xhr.readyState)
               // 第三步:發出請求
               xhr.send(null); // null表示請求體是空 get請求的請求體都是空 post請求的請求體不空
               // 第四步:得到服務器響應的結果 監聽ajax狀態變化
               xhr.onreadystatechange = function () { // 當狀態發生改變,就會觸發onreadystatechange事件
                // console.log(xhr.readyState); // xhr.readyState獲取ajax對象的狀態
                if(xhr.readyState === 4 && xhr.status == 200){
                 // xhr.responseText 獲取服務器響應的數據
                 // console.log(xhr.responseText)
                 msg.innerHTML = xhr.responseText;
                }
               }
            
              }
            
             </script>
            </body>
            </html>

            JS:

            let express = require("express");
            let bodyParser = require("body-parser");
            let app = express();
            
            // 給ejs模板引擎設置別名,別名叫html
            app.engine("html",require("ejs").__express);
            app.set("view engine","html");// 使用html模板引擎
            // 指定模板的存放位置
            app.set("views","./views")
            
            // 配置bodyParser
            app.use(bodyParser.json())
            app.use(bodyParser.urlencoded({extended:false}))
            
            // 路由
            app.get("/",(req,res)=>{
             res.render("reg01"); // 渲染模塊
            })
            
            // 處理注冊
            app.post("/doreg",(req,res)=>{
             // 獲取客戶端傳遞的數據
             let username = req.body.username.trim();
             let pwd = req.body.pwd.trim();
             let repwd = req.body.repwd.trim();
             // console.log(username,pwd,repwd)
            
             // 模擬從數據庫中獲取的用戶信息
             let users = ["wangcai","xiaoqiang","admin"];
             if(users.find(user=>user===username)){
              res.send("<h1 style='color: red'>對不起,該用戶名已經被注冊了,請換個用戶名~<a href='/'>返回注冊頁</a></h1>")
             }else{
              res.send("<h1 style='color: green'>恭喜你,該用戶名可以使用~<a href='/'>返回注冊頁</a></h1>")
             }
            })
            
            app.listen(3000,()=>{
             console.log("server is running on 3000~")
            })

            以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

            相關文章

            最新評論

            hao500彩票 www.658peizi.com:红桥区| www.diaoseng.com:花垣县| www.adocweb-bourgogne.org:厦门市| www.char-o-lotranch.com:道真| www.m8667.com:桂东县| www.stoppenmetrokentips.com:华坪县| www.toreadmoto.com:江油市| www.frizerski-salon.net:平昌县| www.rutthe.com:繁昌县| www.x5china.com:正镶白旗| www.continue1.com:麻阳| www.politicallyscrewed.com:华容县| www.cialisn.com:吴堡县| www.sjdhgs.com:密山市| www.01dyy.com:龙川县| www.bluesteelgaming.com:黔南| www.oldschoolvans.com:桐乡市| www.pictain.com:晋江市| www.daggervale.org:漳平市| www.zgkzjz.com:随州市| www.qpjmw.com:商洛市| www.capsule-toys-hk.com:台南市| www.lalshahbaz.com:弥勒县| www.phukettech.com:瑞安市| www.marcusminge.com:突泉县| www.ydgongce.com:稷山县| www.taxi053.com:南漳县| www.glviagragtr.com:固阳县| www.jbjt888.com:当雄县| www.mfbbn.com:睢宁县| www.u-lott.com:禄丰县| www.whatschimp.com:彰武县| www.anapanasatiyoga.net:雅安市| www.imperialfmodels.com:新沂市| www.781312.com:合阳县| www.masjixie.com:鸡泽县| www.skatesharks.com:长丰县| www.445cf.com:依安县| www.whatschimp.com:龙南县| www.almadatech.com:莆田市| www.kinostream.net:磐安县| www.foxbreaks.com:南平市| www.uberdrivingparttime.com:巴塘县| www.74li.com:宜昌市| www.cp7665.com:临海市| www.cp5583.com:东宁县| www.tjlc56.com:青龙| www.baiyunplaza.com:三亚市| www.madlypopn.com:新蔡县| www.979903.com:台安县| www.ccjxbm.com:葵青区| www.slclong.com:德江县| www.mueryoubabing.com:乌兰浩特市| www.tj-mro.com:鲜城| www.gearsexporters.com:桓台县| www.wwwhg5717.com:平罗县| www.hongtaitiyu.com:嫩江县| www.communitydininghub.com:察雅县| www.holistichealthtalk.com:大城县| www.enselo.com:万荣县| www.top10logo.com:蛟河市| www.xvideogaytube.com:靖安县| www.wwwhg5844.com:剑河县| www.acseconference.com:麦盖提县| www.hqjyjg.cn:巴楚县| www.smrig.com:新野县| www.maranathawichita.com:怀集县| www.g7568.com:报价| www.suenoshumedos.com:溆浦县| www.motonitro.com:怀来县| www.hg38345.com:楚雄市| www.morethanmusichk.org:崇左市| www.sustainablenepal.com:辽宁省| www.cm766.com:红河县| www.cachuongcollagen.com:徐州市| www.tea778.com:和平县| www.hg98345.com:石柱| www.adocweb-bourgogne.org:高安市| www.jonianet.com:南平市| www.hao-jiazheng.com:延长县| www.ajseger.com:玛曲县| www.busemfm.com:宁强县| www.tswtchkviii.net:盐边县| www.gymdaisy.com:汤阴县|