本节将向您介绍一个最简单的PHP和Ajax交互的例子。
思路：1. 在test.html里准备一个输入框、一个按钮（触发回调函数sendAjax）和一个显示标签（div.result），通过sendAjax()函数向test.php服务器发送请求。2. sendAjax()函数主要内容是：创建XMLHttpRequest对象，配置为表单提交，通过send()方法提交数据，在请求成功时获取数据，填充div.result的标签内容。3test.php处理请求，在$_POST['name']存在且不为空字符串时打印姓名和发送时间。
1. test.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单的AJAX示例</title>
</head>
<body>
<h2>AJAX PHP 测试</h2>
<input type="text" id="name" placeholder="输入你的名字" value="Dotcpp编程">
<button onclick="sendAjax()">发送请求</button>
<div id="result" style="margin-top: 20px;"></div>
<script>
function sendAjax() {
// 1. 获取输入框的值
let name = document.getElementById("name").value;
// 2. 创建XMLHttpRequest对象
let xhr = new XMLHttpRequest();
// 3. 配置请求
xhr.open("POST", "test.php", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");//指定发送方式是表单提交
// 4. 定义响应处理函数
xhr.onreadystatechange = function() {
/*readystate==4&&status==200表示一个http请求已经成功完成！*/
if (xhr.readyState == 4 && xhr.status == 200) {
// 更新页面显示结果
document.getElementById("result").innerHTML = xhr.responseText;//进行div.result的内容更新
}
};
// 5. 发送请求（发送数据）
xhr.send("name=" + encodeURIComponent(name));
}
</script>
</body>
</html>2. test.php
<?php
// 获取POST数据
$name = isset($_POST['name']) ? $_POST['name'] : '';
// 简单的处理逻辑
if (!empty($name)) {
echo "你好, " . htmlspecialchars($name) . "!<br>";
echo "当前时间: " . date('Y-m-d H:i:s');
} else {
echo "请输入你的名字！";
}
?>3. 效果演示：
3.1 输入框输入姓名（这里默认是Dotcpp编程）：
3.2点击发送请求后会看到自己的姓名和发送时间：
总结：本节我们主要感受一下异步Ajax的基本步骤以及实际效果，转变我们的传统思路，适应使用Ajax来渲染局部页面的技术方式。
C语言网提供由在职研发工程师或ACM蓝桥杯竞赛优秀选手录制的视频教程，并配有习题和答疑，点击了解：
一点编程也不会写的：零基础C语言学练课程
解决困扰你多年的C语言疑难杂症特性的C语言进阶课程
从零到写出一个爬虫的Python编程课程
只会语法写不出代码？手把手带你写100个编程真题的编程百练课程
信息学奥赛或C++选手的 必学C++课程
蓝桥杯ACM、信息学奥赛的必学课程：算法竞赛课入门课程
手把手讲解近五年真题的蓝桥杯辅导课程