ajax 提交表單 原生js

ajax在表單中常用，一般都是使用post方法，ajax請求：前台提交數據→后台查詢數據→返回給前台

下面以post方法為例上代碼：

<form action="login" method="post">
        用戶名：<input type="text" onblur="checkUser()">
        <span></span>
        密碼：<input type="password">
        <button>登錄</button>
</form>

javascript:

<script>
        function checkUser(){
            var userName=document.getElementsByTagName("input")[0].value;
            var mark=document.getElementsByTagName("span")[0];
            var xhr="";
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }else if(window.ActiveXObject){
                xhr=new ActiveXObject();
            }//處理瀏覽器兼容
            xhr.open("post","login",true);//請求的方式、地址、異步
            xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");//post請求設置請求頭
            xhr.send("userName="+userName);
            xhr.onreadystatechange=function(){
                //接收后台傳回的數據  更新頁面
                if(xhr.readyState==200 && xhr.status==4){
                    if(response==0){
                        mark.innerText="已注冊請登錄"
                    }else if(response==1){
                        mark.innerText="用戶名不存在請注冊"
                    }
                }
            }
        }
</script>

服務器攔截並響應：

app.post("login",function(req,res){  //攔截地址  設置回調函數
    let userName=req.body.userName;//獲取到用戶輸入的用戶名
    let sqlStr="select * from t_user where u_name=?"//查詢數據庫用戶名
    database.dbconnect(sqlStr,[],function(err,data){
        if(data.length>0){   //判斷用戶名是否存在，做出相應響應
            res.send("0")//用戶名存在返回0
        }else{
            res.send("1")//用戶名不存在返回1
        }
    })
})

以上為今天所有分享，歡迎評論賜教；

如需了解更多，請進入知了堂社區：http://www.zhiliaotang.com/portal.php;