成人精品天堂一区二区三区 ,在线天堂官网,免费观看成人欧美www色

首頁 > 博客列表 > jQuery實現(xiàn)登錄案例

博主信息

博文 61

粉絲 0

評論 0

訪問量 73761

專題推薦

更多>

實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery實現(xiàn)登錄案例</title>
    <script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        form{
            width: 500px;
            height: 500px;
            margin: auto;
        }
    </style>
</head>
<body>
<form action="check.php" method="post">
                <fieldset>
                    <legend>用戶登錄</legend>
                    <p>
                        <label for="email">郵箱：</label>
                        <input type="text" id="email" name="email">
                    </p>
                    <p>
                        <label for="password">密碼：</label>
                        <input type="text" id="password" name="password">
                    </p>
                    <p>
                        <button>登錄</button>
                        <span id="tips" style="font-size: 1.2em;color: red;"></span>
                    </p>
                </fieldset>
</form>
</body>
<script>
        $('button').on('click',function () {
//            1.提交地址
           var URL='check.php?m=login'
//            2.要提交的數(shù)據(jù)
            var data={
               'email':$('#email').val(),
                'password':$('#password').val()
            }
//            3.成功回調(diào)函數(shù)
            var success=function (res) {
                if(res=='1'){
                    $('#tips').text('登錄成功，正在跳轉(zhuǎn)...')
                    setTimeout(function () {
                        location.href='index.php'
                    },2000)
                }else{
                    $('#tips').text('郵箱密碼錯誤，請重新輸入...')
                    $('#email').focus()
                    setTimeout("tips.innerHTML='' ",2000)
                }
            }
//            4.設置返回數(shù)據(jù)格式
            var dataTYPE='json'
//            5.調(diào)用全面函數(shù)$.post()
            $.post(URL,data,success,dataTYPE)

            return false
        })
</script>
</html>

運行實例 ?

點擊 "運行實例" 按鈕查看在線實例

chech.php代碼：

<?php
if($_GET['m'] == 'login'){
if($_POST['email']=='admin@php.cn'&& $_POST['password']=='123456'){
echo '1';
}else{
echo '0';
}
}

index.php代碼：

<?php
header("content-type:text/html;charset=utf8");
echo '<h1>登錄成功</h1>';

手抄：