登录  /  注册
博主信息
博文 38
粉丝 1
评论 0
访问量 25010
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
jQuery中的Ajax操作--2018年09月20日18时55分
一根火柴棒的博客
原创
603人浏览过

1. 编程1: $.post()实现用户注册

提示,用邮箱或手机,密码进行注册,邮箱或手机必须在表中唯一,如果重复,必须给用户提示。密码必须要进行非空和长度判断。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<h3>用户登录$.POST</h3>

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

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

</p>

<button type="submit">提交</button>

<script src="jquery.js"></script>
<script>

    //1. 编程1: $.post()实现用户注册
    //提示,用邮箱或手机,密码进行注册,邮箱或手机必须在表中唯一,
    //如果重复,必须给用户提示。密码必须要进行非空和长度判断。
    $('button').click(function () {
        if ($('#email').val().length === 0) {
            //动态添加span
            $('#email').after('<span style="color:red"> 邮箱不能为空</span>')
                .next().fadeOut(3000);
            //设置焦点
            $('#email').focus();
            return false;
        }

        if ($('#password').val().length < 6) {
            //动态添加span
            $('#password').after('<span style="color:red"> 密码长度不能小于6位</span>')
                .next().fadeOut(3000);
            //设置焦点
            $('#password').focus();
            return false;
        }

        $.post(
            'check.php',
        {
            email:$('#email').val(),
            password:$('#password').val()
        },
        // 响应成功
        function (data) {
            console.log(data);
            if (data.status == 1){
                $('button')
                    .after('<span style="color:green"></span>')
                    .next()
                    .html(data.message) //填充span内容
                    .fadeOut(3000);
            } else {
                $('button')
                    .after('<span style="color:red"></span>')
                    .next()
                    .html(data.message) //填充span内容
                    .fadeOut(3000);
            }
        },

        //响应数据类型
        'json'
        )


    })
</script>



</body>
</html>

运行实例 »

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

实例

<?php
/**
 * Created by PhpStorm.
 * User: T3rdW
 * Date: 2018/9/20
 * Time: 18:13:39
 */

//echo json_encode("测试数据");

$email = htmlspecialchars($_POST['email']);
//密码 sha1加密
$password = sha1(htmlspecialchars($_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;
    $message = '验证通过';
} else {
    $status = 0;
    $message = '邮箱或密码错误';
}

echo json_encode(['status'=>$status,'message'=>$message]);

运行实例 »

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

2. 编程: 用ajax实现省/市/县三联下拉框联动查询功能,可使用json完成。

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业</title>
</head>
<body>

省: <select name="" id="pro"></select>
市: <select name="" id="city"></select>
区: <select name="" id="area"></select>
<script src="jquery.js"></script>
<script>

$(function(){
    $.getJSON('1.json',function (data) {
        let option = '<option value="">选择省</option>'
        $.each(data,function(i){
            option += '<option value="'+data[i].proId+'">'+data[i].proName+'</option>';
        });
        console.log(option);
        $('#pro').html(option);
    })

    $('#pro').change(function(){
        $.getJSON('2.json',function(data){
            let option = '<option value="">选择市</option>'
            $.each(data,function(i){
                if ($('#pro').val() == data[i].proId) {
                option += '<option value="'+data[i].cityId+'">'+data[i].cityName+'</option>';
                };
            });
            //console.log($('#pro').val());
            $('#city').html(option);

        })

    })

    $('#city').change(function(){
        $.getJSON('3.json',function(data){
            let option = '<option value="">选择区</option>'
            $.each(data,function(i){
                if ($('#city').val() == data[i].cityId) {
                    option += '<option value="'+data[i].areaId+'">'+data[i].areaName+'</option>';
                };
            });
            //console.log($('#city').val());
            $('#area').html(option);

        })

    })
})


</script>

</body>
</html>

运行实例 »

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


批改状态:合格

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

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

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