博主信息
博文 39
粉丝 0
评论 0
访问量 37385
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery第三课:jquery中的ajax验证,重点掌握$.post(),$.getJSON(),$.ajax()这三种函数方法 2018年9月19日 22:46
南通税企通马主任的博客
原创
914人浏览过

1、 $.post()实现用户注册

实例 数据库校验

<?php
$email = htmlspecialchars(trim($_POST['email']));
//$password = sha1(htmlspecialchars(trim($_POST['password'])));

$pdo = new PDO('mysql:host=127.0.0.1;dbname=php','root','root');

$sql = "SELECT COUNT(*) FROM `user` WHERE `email`= :email";

$stmt = $pdo ->prepare($sql);

$stmt ->execute(['email'=>$email]);

if ($stmt ->fetchColumn(0) == 1){
    $status = 1;
    $msg = '该邮箱已存在,请换一个!';
}else{
    $status = 0;
    $msg = '恭喜你,该邮箱可以使用!';
}
echo json_encode(['status'=>$status,'message'=>$msg]);


实例 用户注册

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()实现用户注册</title>
</head>
<body>
<h3>用户注册</h3>
<p>
    <label for="email">邮箱:</label>
    <input type="email" id="email" name="email">
</p>
<p>
    <label for="password">密码:</label>
    <input type="password" id="password" name="password">
</p>
<p><button>注册</button></p>
<script src="../jquery.js"></script>
<script >
    $('#email').blur(function () {
        $.post('lib/login.php',
            {email: $('#email').val(),password: $('#password').val()},
            function(data) {
                if (data.status === 1) {
                    $('#email')
                        .after('<span style="color:red"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(3000);
                } else {
                    $('#email')
                        .after('<span style="color:green"></span>')
                        .next()
                        .html(data.message)
                        .fadeOut(3000);
                }
            },
            'json'
        );
    })

</script>
</body>
</html>

运行实例 »

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


2、用ajax实现省/市/县三联下拉框联动查询功能

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三级联动</title>
</head>
<body>
<div>
    省: <select name="pro" id="pro"></select>
    市: <select name="city" id="city"></select>
    区县: <select name="area" id="area"></select>
</div>
<script src="../jquery.js"></script>
<script>
    $(function () {
        $.getJSON('lib/1.json',function (data) {
            let option = '<option value="">选择(省)</option>';
            $.each(data,function (i) {
                option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
            })
            $('#pro').html(option);
        })
        $('#pro').change(function () {
            $.getJSON('lib/2.json',function (data) {
                let option = '<option value="">选择(市)</option>';
                $.each(data,function (i) {
                    if (data[i].proId == $('#pro').val()){
                        option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                    }
                })
                $('#city').html(option);
            })
        })
        $('#city').change(function () {
            $.getJSON('lib/3.json',function (data) {
                let option = '<option value="">选择(区县)</option>';
                $.each(data,function (i) {
                    if (data[i].cityId == $('#city').val()) {
                        option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>'
                    }
                })
                $('#area').html(option);
            })
        })
    })
</script>
</body>
</html>

运行实例 »

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


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学