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标签，这个有点没搞懂。

Correcting teacher：

天蓬老师

Correction status：qualified

Teacher's comments：jQuery还在更新呢

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

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

2020-06-11 17:50:49