<tt id="eol1w"></tt>
  • 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~")
    })

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

    相關文章

    最新評論

    盈利国际彩票 www.tq4h.com:天全县| www.044m.com:舞阳县| www.nesemancreative.com:淄博市| www.nbtbf.com:团风县| www.33fsfs.com:遂平县| www.jigoloturkiye.net:玉林市| www.fenggongsi.com:定边县| www.v8f4.com:电白县| www.zzcsfs.com:武夷山市| www.cp9221.com:富锦市| www.bmwholding.com:江孜县| www.cbearings.com:广饶县| www.carakesehatan.com:青海省| www.jl095.com:诸城市| www.oopsireadabookagain.com:泾源县| www.baijiale55.com:汉沽区| www.creativegroupbd.com:呼和浩特市| www.esb8589.com:岳阳市| www.cantaxhelp.com:棋牌| www.650807.com:红桥区| www.zblongyun.com:类乌齐县| www.safecarservice.com:江川县| www.floridahospitaldls.com:梅河口市| www.ascendingwings.com:安庆市| www.lzhso.com:拜城县| www.cnsxmr.com:云南省| www.curso-endodoncia.com:淄博市| www.zrh6.com:杂多县| www.falsestop.com:旺苍县| www.garagedoorsirvine.com:黑河市| www.sgiphone.com:和平区| www.sz-jhdz.com:永泰县| www.shophapi.com:渑池县| www.anfibiorecords.com:平安县| www.romanyrestaurant.com:南康市| www.hg97345.com:桂平市| www.jll-ah.com:新和县| www.tattoo-drawings.com:兰西县| www.riseaboveself.org:昌乐县| www.fabkarts.com:恩施市| www.zhenguonet.com:钟山县| www.nnbyrm.com:河南省| www.elisa110.com:遂川县| www.petsupplydistributor.com:彭山县| www.chadathaihouse.com:洪江市| www.hroqbp.com:芦溪县| www.g3g2.com:香格里拉县| www.ppmss.com:德化县| www.abrasys.com:华宁县| www.magic-ts.com:平遥县| www.eldukedegreaser.com:垫江县| www.troop199fishers.com:巴彦淖尔市| www.madinafrica.com:西贡区| www.techidana.com:卢湾区| www.americanestatebrokers.com:宣武区| www.div3rec-culture.com:新丰县| www.tranoweb.com:苏尼特左旗| www.82588k.com:池州市| www.runtongin.com:钟祥市| www.fw776.com:大理市| www.nba-sports.com:邯郸县| www.rubinsteintaybi.org:武强县| www.nederlandsefilms.com:长治市| www.edunestinstitute.com:四平市| www.vns4393.com:治多县| www.anastronaut.com:岐山县| www.whobuysthesethings.com:麻江县| www.foorat.com:怀来县| www.ddplw.cn:德化县| www.e2aa.com:那曲县| www.pret-pas-cher.com:桓台县| www.xisepian.com:类乌齐县| www.myo89.com:容城县| www.youqushu.com:嘉禾县| www.rs338.com:屯昌县| www.pornofilmid.net:临漳县| www.weiyanwangluo.com:仙居县| www.bjblwed.com:稷山县| www.laopinionxyz.com:平阴县| www.shenqi5150.com:靖安县| www.pobohn.com:齐河县| www.shilongwangcn.com:云和县| www.mirrorsmagnifiers.com:芜湖县| www.dickalerts.com:延安市|