【我的筆記】《知了堂》ajax的get及post請求

時間 2019-11-30

標籤我的筆記知了堂 ajax post 請求欄目 Ajax 简体版

原文原文鏈接

ajax

執行步驟html

// 步驟mysql

設置事件調用函數ajax

建立一個XHR對象
打開ajax通道，連接服務器，配置請求信息和參數
發送數據
設置回調函數
服務器接受請求，處理請求，查詢數據庫，響應及返回數據
回調函數接受數據，執行回調函數
回調函數中更新頁面。

　　示例：sql

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>表單</title>
</head>
<body>
    <form action="login" method="get">
        <h1>登錄</h1>
        用戶名：<input type="text" name="userName" onblur="checkUser()">
        <span id="msg"></span>
        密碼：<input type="password" name="pwd">
        <input type="submit">
    </form>
    <script>
        function checkUser(){
            var userName=document.forms[0].elements[0].value;
            var xhr='';
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();//DOM
            }else if(window.ActiveXObject){
                xhr=new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器標準
            }
            // 打開連接配置參數，
            // *   一、 請求方式  就是要告訴它是get、post
            // *   二、 請求地址 url
            // *   三、同步 仍是 異步（async），這個跟頁面刷不刷新沒有關係，是對程序自己的考慮，默認是異步請求true，true異步請求，這個是ajax裏面的兩個機制，true是異步表示當有東西回來了才執行，同步請求是false是好比有多個ajax請求，他會等一個結束了才執行第二個，
            xhr.open("get","checkUser.do?userName="+userName,true);
            xhr.send(null);//get方式 send是null
　　　　　　  //請求事後會有一個回調函數等待服務器響應在接受數據
            xhr.onreadystatechange=function(){
                console.log(xhr.responseText)
            }
        }
    </script>
</body>
</html>

鏈接數據庫
　　示例：

const mysql=require("mysql"); //引用數據庫模塊
const checkUser=function(req,resp){
    console.log(req)
    let userName=req.query.userName;
    let pool=mysql.createPool({
        host:"主機地址",
        port:"主機端口",
        user:"用戶名",
        password:"主機密碼",
        database:"數據庫名"
    })
    pool.getConnection(function(error,connection){
        if(error){
            console.log(error)
        }
        let sqlStr="select * from t_user where u_name=?";
        connection.query(sqlStr,[userName],function(err,data){
            console.log(data)
　　　　　　　//由於是註冊嘛因此是data的長度大於0的時候說明數據庫裏面已經有這個帳號了
　　　　　　　if(data.length>0){
                resp.send("用戶名已經存在");
            }else{
                resp.send("你好棒，快去註冊吧。");
            }
        });
        connection.release();
    })
}
module.exports={
    checkUser:checkUser
}

服務器引用

const loginCheck=require("數據庫模板地址");

服務器攔截請求

app.get("/攔截地址",loginCheck.checkUser)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

【我的筆記】《知了堂》ajax的get及post請求

ajax

鏈接數據庫 示例：

服務器引用

服務器攔截請求

鏈接數據庫
　　示例：