jQuery的ajax操作

jQuery事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery事件</title>
    <style>
        form {
            width: 300px;
            height: 200px;
            margin: 20px auto;
            background-color: bisque;
            display: flex;
            flex-flow: column;
            justify-content: space-evenly;
            align-items: center;
            border-radius: 10px;
        }
        .item {
            margin-left: -120px;
        }
        .btn {
            width: 100px;
            height: 30px;
        }
        .lab {
            margin-left: 17px;
        }
        h2 {
            text-align: center;
            color: cadetblue;
        }
    </style>
</head>
<body>
    <h2>用户登录</h2>
    <form action='' method="GET">
        <div>
            <label for="username">用户名：</label>
            <input type="text" id="username" name="username" autofocus value="明仔" placeholder="请输入用户名">
        </div>
        <div class="lab">
            <label for="password">密码：</label>
            <input type="password" id="password" name="password" value="123456" placeholder="请输入密码">
        </div>
        <div class="item">
            <label for="config">是否记住密码</label>
            <input type="checkbox" name="config" id="config" value="1" checked>
        </div>
        <div><button class='btn'>登录</button></div>
    </form>
    <script src="../lib/jquery-3.5.1.js"></script>
    <script>
        $("form").submit(function (ev) {
            // 禁用表单的默认行为
            ev.preventDefault();
        });
        // 验证用户名是正确
        // 先获取用户名输入框
        var user = $("input[name=username]");
        // 失去焦点事件
        user.blur(function () {
            // 提示
            var tips = "";
            // 演示从数据库获取的用户名数据
            var users = ["useradmin", "admin", "adminpwd"];
            if ($(this).val().trim().length === 0) {
                // 如果有空格清除空格并重新获取焦点
                $(this).val("")
                $(this).focus();
                tips = "用户名不能为空";
            } else if (users.indexOf($(this).val()) === -1) {
                // 验证用户名输入框内容是否在数据中
                tips = "用户名不存在请：" + "<button type='button'>注册</button>";
            } else {
                tips = "<span style='color:green'>用户名正确</span>"
            }
            // 防止重复添加
            if ($(this).parent().next().get(0).tagName !== "SPAN") {
                $("<span>").html(tips).css("color", "red").insertAfter($(this).parent());
            }
            // 用户重新输入内容时提示信息消失
            user.on("keydown", function () {
                $(this).parent().next("span").remove();
            })
        });
    </script>
</body>
</html>

ajax方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery的ajax</title>
    <style>
        div {
            width: 400px;
            height: 300px;
            display: flex;
            flex-flow: column;
        }
        button {
            margin: 5px;
        }
    </style>
</head>
<body>
    <div>
        <button>1.load()请求数据</button>
        <button>2.$.get()请求数据</button>
        <button>3.$.post()请求数据</button>
        <button>4.get.JSON()请求JSON数据</button>
        <button>5.ajax()请求数据</button>
        <button>6.$.ajax()-jsonp-跨域请求数据1</button>
        <button>7.$.ajax()-jsonp-跨域请求数据2</button>
    </div>
    <script src="../lib/jquery-3.5.1.js"></script>
    <script>
        // 1.load()方法获取html片段
        $("button:first-of-type").click(function () {
            // 插入到前面
            // $(this).before("<div>").prev().load("load.html");
            // 插入到后面
            $("<div>").load("load.html").insertAfter($(this));
        });
        // 2.get()方法
        $("button:nth-of-type(2)").click(function (ev) {
            $.get("ceshi.php", { id: 1 }, function (data) {
                $("<div>").html(JSON.parse(data)).insertAfter($(ev.target));
                // console.log(JSON.parse(data))
            });
        });
        // 3.post方法
        $("button:nth-of-type(3)").click(function (ev) {
            $.post("ceshi.php", { id: 2 }, function (data) {
                $("<div>").html(JSON.parse(data)).insertAfter($(ev.target));
            })
        });
        // 4.$.get.JSON()方法
        $("button:nth-of-type(4)").click(function (ev) {
            $.getJSON("ceshi.php", { id: 3 }, function (data) {
                $("<div>").html(data).insertAfter($(ev.target));
            })
        });
        // 5.$.ajax()方法
        $("button:nth-of-type(5)").click(function (ev) {
            $.ajax({
                // 请求类型
                type: "GET",
                // 请求的url
                url: "ceshi.php",
                // 发送的数据
                data: { id: 4 },
                // 返回类型
                dataType: 'json',
                success: function (data) {
                    $("<div>").html(data).insertAfter($(ev.target));
                }
            });
        });
        // 6.-jsonp-跨域请求数据1
        $("button:nth-of-type(6)").click(function (ev) {
            $.ajax({
                type: "GET",
                url: "http://phpio.com/JSONP.php?jsonp=?&id=1",
                dataType: "jsonp",
                success: function (data) {
                    var date = "<li>" + data.title + "</li>";
                    date += "<li>" + data.user.name + "</li>";
                    date += "<li>" + data.user.result + "</li>";
                    $("<div>").html(date).insertAfter($(ev.target));
                },
            });
        });
        // 7.-jsonp-跨域请求数据2
        $("button:last-of-type").click(function (ev) {
            $.ajax({
                type: "GET",
                url: "http://phpio.com/JSONP.php?jsonp=?&id=3",
                dataType: "jsonp",
                jsonpCallback: "get",
            });
        });
        function get(data) {
            var date = "<li>" + data.title + "</li>";
            date += "<li>" + data.user.name + "</li>";
            date += "<li>" + data.user.result + "</li>";
            $("<div>").html(date).insertAfter($("button:last-of-type"));
        };
    </script>
</body>
</html>

无刷新分页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>post分页</title>
    <style>
        table {
            border: 1px solid black;
            border-collapse: collapse;
            width: 300px;
            margin: 30px auto;
            text-align: center;
        }
        td {
            border: 1px solid;
        }
        thead {
            background-color: lightblue;
            font-size: 1.2rem;
        }
        p {
            text-align: center;
        }
        p>a {
            text-decoration: none;
            border: 1px solid black;
            padding: 0 5px;
            color: lightslategray;
        }
        .active {
            background-color: lightslategray;
            color: lightyellow;
        }
    </style>
</head>
<body>
    <table>
        <caption>用户信息</caption>
        <thead>
            <tr>
                <td>ID</td>
                <td>姓名</td>
                <td>性别</td>
            </tr>
        </thead>
        <tbody></tbody>
    </table>
    <!-- 分页条 -->
    <p></p>
    <script src=" ../lib/jquery-3.5.1.js"></script>
    <script>
        // 默认第一页
        var page = 1;
        // 显示第一页
        get(page);
        function get(page) {
            $.ajax({
                type: "POST",
                url: "fenye.php",
                data: { page: page },
                dataType: "json",
                success: show,
            });
        };
        function show(data) {
            // console.log(data);
            // 显示数据
            var str = "";
            data.user.forEach(function (item) {
                str += "<tr>";
                str += "<td>" + item.id + "</td>";
                str += "<td>" + item.username + "</td>";
                str += "<td>" + item.sex + "</td>";
                str += "</tr>";
            });
            $("tbody").html(str);
            // 显示分页条
            var a = "";
            for (var i = 0; i < data.pages; i++) {
                a += '<a href="" data-index=' + (i + 1) + ">" + (i + 1) + "</a>"
            }
            // 把分页条显示到页面中
            $("p").html(a);
            // 生成a标签的高亮
            $("a").get(data.page - 1).classList.add("active");
        }
        $("p").click(function (ev) {
            // 先禁用默认行为
            ev.preventDefault();
            // 获取页码
            page = $(ev.target).data("index");
            get(page);
        });
    </script>
</body>
</html>

PHP代码

<?php
// 分页数据脚本
// 连接数据库
$pdo = new PDO("mysql:host=localhost;dbname=user;charset=utf8;", "root", "root");
// 获取页码
$page = $_POST['page'] ?? 1;
// 每页显示数量
$num = 7;
// 每页偏移量
$offset = ($page - 1) * $num;
// 获取总页数
$sql = "SELECT CEIL(COUNT(`id`)/{$num}) AS `total`FROM `apple`";
// $sql = "SELECT * FROM `apple`";
$pages = $pdo->query($sql)->fetch(PDO::FETCH_ASSOC)['total'];
// 获取分页数据
$sql = "SELECT * FROM `apple` LIMIT {$num} OFFSET {$offset}";
$user = $pdo->query($sql)->fetchAll(PDO::FETCH_ASSOC);
// 返回给前端数据
echo json_encode(["pages" => $pages, "user" => $user, "page" => $page]);

总结

1.一开始是想着和之前一样点击后把之前的高亮去除后再添加，点击事件忙活了一下才发现一开始设置高亮的代码不能写死，不然每次执行show方法时只有第一个有高亮显示
2.有个疑问就是，一开始是想着在show方法外面设置高亮，那么就可以实现先取消高亮然后通过点击再设置高亮，但是在show方法外面获取不到a标签，只有在show方法里面才能获取的到a标签，这个有点没搞懂。

批改老师：

天蓬老师

批改状态：合格

老师批语：jQuery还在更新呢

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

PHPstudy和VSCode的安装和配置的作业（6.10）

2020-06-11 17:50:49