PHP学习笔记：人机交互与用户体验

<fORM method="post" action="process.php">
    <input type="text" name="username" id="username" onblur="checkUsername()">
    <span id="username-error"></span>
    <input type="passWord" name="password">
    <input type="submit" value="提交">
</form>

function checkUsername() {
    var username = document.getElementById("username").value;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("username-error").innerHTML = xhr.responseText;
        }
    };
    xhr.open("GET", "check_username.php?username=" + encodeURIComponent(username), true);
    xhr.send();
}

<?php
$username = $_GET["username"];
// 在这里进行用户名的验证逻辑
if (用户名已存在) {
    echo "用户名已存在";
} else {
    echo "";
}
?>

<?php
$conn = Mysqli_connect("localhost", "username", "password", "database");
if (!$conn) {
    die("数据库连接失败：" . mysqli_connect_error());
}
?>

<div id="content"></div>
<button onclick="loadMore()">更多</button>

var page = 1;

function loadMore() {
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
        if (xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("content").innerHTML += xhr.responseText;
        }
    };
    xhr.open("GET", "load_more.php?page=" + page, true);
    xhr.send();
    page++;
}

<?php
$page = $_GET["page"];
$limit = 10;
$start = ($page - 1) * $limit;
// 获取数据库中的数据
$rows = mysqli_query($conn, "SELECT * FROM table LIMIT $start, $limit");

while ($row = mysqli_fetch_array($rows)) {
    // 显示数据
}
?>