<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.bakedandbranded.com:阳泉市| www.faisal1624.com:天长市| www.zjlcbj.com:弥渡县| www.testsite03.com:仙居县| www.blackspaceidp.com:民县| www.ksbafang.com:五华县| www.classifiedscolumn.com:肇州县| www.ninareviews.com:台南县| www.cp7675.com:宜昌市| www.bungalowsvicksol.com:克山县| www.1pshouhui.com:靖远县| www.hirdavatciyiz.com:平昌县| www.huthug.com:深水埗区| www.radiosolmansi.org:政和县| www.ecanvs.com:海南省| www.lebronsoldiershoes.com:循化| www.5510086.com:会理县| www.allsatonline.com:巩留县| www.hg52456.com:拜城县| www.akaeno.com:涞水县| www.bostonsalist.com:阳泉市| www.mfjqs.com:隆化县| www.shanghaisujia.com:新和县| www.grandgreen-energy.com:屏边| www.hibibhoora.com:樟树市| www.eicsamexico.com:泊头市| www.jinzhouqu.com:图木舒克市| www.isi-stone.com:元谋县| www.lts-portal.org:泰兴市| www.m8385.com:靖边县| www.fnsbx.cn:桦南县| www.auburnoysterbar.com:无极县| www.senamobilyadekorasyon.com:华阴市| www.enshuohuojia.com:襄汾县| www.gx-gad.com:和龙市| www.hearingspecialistcarolina.com:岗巴县| www.elmasseker.com:交城县| www.microseep.com:饶河县| www.selailai.com:云霄县| www.mftyd.com:阜南县| www.sifancn.com:苏尼特右旗| www.happy-pie.com:伊川县| www.tauntonweb.com:新乡市| www.creantik.com:林甸县| www.aloeveramedicine.com:新巴尔虎左旗| www.npathfinder.com:固安县| www.purefitnessoc.com:交口县| www.tangoporteno.org:应用必备| www.chengsekeji.com:喀什市| www.toptuto.com:湖南省| www.rlasurveys.org:积石山| www.xnkdaiviet.com:乌兰察布市| www.maluna-lighting.com:墨竹工卡县| www.myproperties4sale.com:临武县| www.alrashidtravels.com:天祝| www.sgillp.com:贵港市| www.shannonrenfrew.com:平乡县| www.yfsco.com:嘉兴市| www.lushundoors.com:忻城县| www.09323jj.com:澜沧| www.bd9777.com:大埔区| www.everyounggroup.com:邢台市| www.fitnessghost.com:达拉特旗| www.gamelip.com:潞城市| www.ssmoban.com:唐山市| www.z9697.com:陵水| www.polperrocornwall.com:彭水| www.desarmamexico.org:延长县| www.magnetiseur-toulon.com:安塞县| www.dapinlv.com:灵川县| www.sharebd.net:孝义市| www.tirlat.com:平远县| www.cp7719.com:柏乡县| www.tssth.org:阿城市| www.shamrockestatesaz.com:永宁县| www.sh61554342.com:临邑县| www.pourmastersca.com:讷河市| www.aggielandmarks.com:灌阳县| www.nc633.com:东兴市| www.mayaramegiolaro.com:杂多县| www.hg10345.com:蓝田县| www.jialeiren.com:远安县| www.yiju188.com:文登市| www.moneykoo.com:隆化县|