登录  /  注册
首页 > 博客列表 > Ajax中的$.post()实现用户注册_2018年9月19日
博主信息
博文 60
粉丝 1
评论 1
访问量 62775
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Ajax中的$.post()实现用户注册_2018年9月19日
PHP学习
原创
1123人浏览过

先准备两个数据文件

school.php

实例

<?php
$schools = ['丐帮','古墓派','峨眉派'];
$option = '<option>请选择</option>';
foreach ($schools as $key=>$value) {
    $option = $option.'<option value='.$key.'>'.$value.'</option>';
}
echo $option;

运行实例 »

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

detail.php


实例

<?php
$detail = [
    '<img src="../../0918/images/1.jpg" width="200"><h3>黄帮主：打狗棒法</h3>',
    '<img src="../../0918/images/3.jpg" width="200"><h3>乔帮主：打狗棒法2</h3>',
    '<img src="../../0918/images/5.jpg" width="200"><h3>李帮主：打狗棒法1</h3>',
];
echo $detail[$_GET['key']];

运行实例 »

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

下面是利用$.get方法来实现Ajax

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>jquery中的$.get()方法</title>
</head>
<body>
<h3>江湖门派查询系统$.get方法</h3>
<label for="school">请选择：</label>
<select name="school" id="school">

</select>
<p id="detail"></p>
<script src="lib/jquery.js"></script>
<script>
    $.get('lib/school.php',function (data,status) {
        if (status === 'success') {
            $('#school').html(data);
        }
    });
    $('#school').change(function (event) {
        $.get('lib/detail.php',{key: $(event.target).val()},function (data,status) {
            if (status === 'success') {
                $('#detail').html(data);
                $('[value=""]').remove();
            } else {
                $('#detail').html('<span style="background-color: red">没有数据</span>');
            }
        });
    });

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

运行实例 »

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

$.get方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.get请求</title>
</head>
<body>
<h3>江湖排行榜</h3>
<label for="school">请选择：</label>
<select name="school" id="school"></select>
<p id="detail"></p>
<script src="lib/jquery.js"></script>
<script>
$.get('inc/school.php',function (data,strtus) {
    if (strtus === 'success') {
        $('#school').html(data);
    }
});
$('#school').change(function (event) {
    $.get('inc/detail.php',{key: $(event.target).val()},
        function (data,status){     // 请求成功的回调方法
            if (status === 'success') {
                $('#detail').html(data);
                $('[value=""]').remove();
            } else {    //出错,未拿到响应数据
                $('#detail').html('<span style="color:red">请求错误</span>');
            }
    },'html'
    );
});

</script>

</body>
</html>

运行实例 »

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

$.getJSON方法

实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>$.getJSON方法</title>
</head>
<body>
<h3>江湖门派排行榜</h3>
<label for="school">请选择：</label>
<select name="school" id="school">

</select>
<p id="detail"></p>
<script src="./lib/jquery.js"></script>
<script>
    $.getJSON('inc/school.json',function (data, status) {
        if (status === 'success') {
            let option = '<option>请选择</option>';
            $.each(data,function (i) {
                option = option+'<option value="'+i+'">'+data[i]+'</option>';
            });
            $('#school').html(option);
        }
    });
    $('#school').change(function (event) {
        $.get('inc/detail.php',{key: $(event.target).val()},function (data,status) {
            if (status === 'success') {
                $('#detail').html(data);
            } else {
                $('#detail').html('<span style="color: red;">无数据</span>')
            }
        },'html');
    });
</script>
</body>
</html>

运行实例 »

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

$.getscript方法加载js文件，下面来使用一下先建立一个JS文件

实例

$('<button></button>').html('动态加载脚本').width(100).height(60).css('background-color','yellow').appendTo('body');

运行实例 »

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

下面是使用$.getscript来加载

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.getscript方法</title>
</head>
<body>
<script src="./lib/jquery.js"></script>
<script>
    $.getScript('lib/demo.js',function () {
        $('button').fadeTo(4000,0.3);
    });
</script>
</body>
</html>

运行实例 »

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

$.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 AND `password`= :password";
$stmt = $pdo->prepare($sql);
$stmt->execute(['email'=>$email,'password'=>$password]);
if ($stmt->fetchColumn(0) == 1) {
   $status = 1;
   $messsage = '验证通过';
} else {
   $status = 0;
   $messsage = '验证末通过';
}
echo json_encode(['status'=>$status,'messsage'=>$messsage]);


JQ验证方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.post()方法</title>
</head>
<body>
<h2>用户登录</h2>
<label>邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱"><br>
<label>密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码"><br>
<button type="button">提交</button>

<script src="lib/jquery.js"></script>
<script>
    $('button').click(function () {
        if ($('#email').val().length === 0) {
            $('#email').after('<span style="color: red;">请输入邮箱</span>').next().fadeOut(2000);
            $('#email').focus();
            return false;
        }
        if ($('#password').val().length === 0) {
            $('#password').after('<span style="color: red">请输入密码</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        }
        if ($('#password').val().length < 6) {
            $('#password').after('<span style="color: red">密码必须大于6位</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        }

        $.post('inc/check.php',{email: $('#email').val(),password: $('#password').val()},function (data, status, xhr) {
            console.log(data.messsage);
            if (data.status === 1) {
                $('button').after('<span style="color: green"></span>').next().html(data.messsage).fadeOut(2000);
            }else {
                $('button').after('<span style="color: red"></span>').next().html(data.messsage).fadeOut(2000);
            }
        },'json')
    });

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

运行实例 »

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

$.ajax方法

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>$.ajax()方法</title>
</head>
<body>
<h2>用户登录</h2>
<label>邮箱：</label>
<input type="email" id="email" name="email" placeholder="请输入邮箱"><br>
<label>密码：</label>
<input type="password" id="password" name="password" placeholder="请输入密码"><br>
<button type="button">提交</button>

<script src="lib/jquery.js"></script>
<script>
    $('button').click(function () {
        if ($('#email').val().length === 0) {
            $('#email').after('<span style="color: red;">请输入邮箱</span>').next().fadeOut(2000);
            $('#email').focus();
            return false;
        }
        if ($('#password').val().length === 0) {
            $('#password').after('<span style="color: red">请输入密码</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        }
        if ($('#password').val().length < 6) {
            $('#password').after('<span style="color: red">密码必须大于6位</span>').next().fadeOut(2000);
            $('#password').focus();
            return false;
        }
        $.ajax({type: 'post',url: 'inc/check.php', dataType: 'json',data: {email: $('#email').val(),password: $('#password').val()},success: function (data,status,xhr) {
                if (data.status === 1) {
                    $('button').after('<span style="color: green"></span>').next().html(data.messsage).fadeOut(2000);
                } else {
                    $('button').after('<span style="color: red"></span>').next().html(data.messsage).fadeOut(2000);
                }
            }
        });
    });

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

运行实例 »

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


批改状态：未批改

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

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

  • 精品班

  • 技术支持

  • 技术咨询

  • 学习群

  • 会员优惠

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录