博客列表 >初始AJAX-post

初始AJAX-post

无耻的鱼
无耻的鱼原创
2018年04月10日 15:27:18768浏览

ajax数据交互,常见的get、post、

2.png


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax</title>
    <style type="text/css">
        div{
            width: 200px;
            margin: auto;
        }
    </style>
</head>
<body>
<div>
            <h2>用户验证</h2>

                <label for="email">邮箱:</label>
                <input type="email" name="email" id="email"> <br>

                <label for="password">密码:</label>
                <input type="password" name="password" id="password"> <br>

                <button>验证</button> 
</div>
</body>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">

    $('button').click (function(){

            $.post(
                'post.php?m=login',
                {           
                    "email": $('#email').val(),
                    "password": $('#password').val()        
                }, 
                function(data){
                    if (data == '1') {
                        alert('你好,你的账号密码正确')
                    } else {
                        alert('你好,你的账号密码不正确')  
                    }
                })

        
        //禁用默认提交
        return false
    })

            
</script>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


0410-1.png0410-2.png


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议