本教程详细阐述了如何通过 ajax 发送表单数据，并从 php 后端接收并处理 json 格式的消息响应。文章重点介绍了在 php 中使用 `echo json_encode()` 发送响应，以及在 javascript 中通过 `json.parse()` 解析接收到的数据，从而实现客户端页面上动态显示服务器返回的消息，提升用户交互体验。
在现代 Web 应用开发中，使用 AJAX (Asynchronous JavaScript and XML) 进行异步数据交互已成为常态。它允许在不刷新整个页面的情况下与服务器通信，从而提供更流畅的用户体验。当通过 AJAX 提交表单数据时，服务器端返回的反馈信息（如成功消息、错误提示等）需要被客户端正确接收和处理，并动态展示给用户。本文将详细指导您如何实现这一过程。
首先，我们来看客户端的 JavaScript 代码。这段代码负责拦截表单提交事件，通过 AJAX 将数据发送到服务器，并处理服务器返回的响应。
初始 AJAX 发送逻辑
以下是使用 jQuery 实现 AJAX 提交的基本结构。它获取一个消息输入框的值，并通过 POST 请求发送到指定的 PHP 端点。
立即学习“PHP免费学习笔记（深入）”；
<script>
$(document).ready(function () {
$('.btn-primary').click(function (e) {
e.preventDefault(); // 阻止表单默认提交行为
var message = $('#message').val(); // 获取消息内容
$.ajax
({
type: "POST", // 请求类型为 POST
url: "<?=baseUrl()?>/page/contact", // PHP 处理脚本的 URL
data: { "message": message }, // 发送的数据
success: function (data) {
// 成功回调函数，在此处理服务器响应
$('#contactform')[0].reset(); // 清空表单
}
});
});
});
</script>正确处理服务器响应
上述代码的 success 回调函数需要进行关键的修改，以正确解析服务器返回的 JSON 字符串。服务器通常会返回一个 JSON 格式的字符串，其中包含 status（表示操作结果）和 message（具体的反馈信息）。
为了在 JavaScript 中使用这些信息，我们需要将接收到的 data 字符串解析成一个 JavaScript 对象。这可以通过 JSON.parse() 方法实现。
<script>
$(document).ready(function () {
$('.btn-primary').click(function (e) {
e.preventDefault();
var message = $('#message').val();
$.ajax
({
type: "POST",
url: "<?=baseUrl()?>/page/contact",
data: { "message": message },
success: function (data) {
// 解析服务器返回的 JSON 字符串
var response = JSON.parse(data);
// 现在可以像访问 JavaScript 对象一样访问数据
var status = response.status;
var message = response.message;
// 根据 status 和 message 更新页面 UI
if (status === true) {
// 例如：显示成功消息
alert('成功: ' + message);
$('#contactform')[0].reset(); // 成功后清空表单
} else {
// 例如：显示错误消息
alert('错误: ' + message);
}
},
error: function(jqXHR, textStatus, errorThrown) {
// 处理 AJAX 请求失败的情况
alert('请求失败: ' + textStatus);
}
});
});
});
</script>在这个改进后的 success 回调中：
接下来，我们转向服务器端的 PHP 代码。PHP 脚本负责接收客户端发送的数据，进行必要的处理（如数据验证、保存到数据库），并以 JSON 格式返回处理结果。
初始 PHP 处理逻辑
以下是接收消息并保存到数据库的 PHP 代码片段。它检查消息是否为空，然后调用模型方法保存数据。
private function messageSend(){
$user_id = $_SESSION['user_id'];
$message = $_POST['message'];
if ($message == null) {
return json_encode(array(
'status' => false,
'message' => 'Please Enter Message'
));
}
$sendTime = getCurrentDateTime();
NoteModel::contact_message($user_id, $message, $sendTime);
return json_encode(array(
'status' => true,
'message' => 'Message Send Success'
));
}正确发送 JSON 响应
在 PHP 中，当您希望将数据作为 AJAX 响应发送回客户端时，仅仅 return json_encode(...) 是不够的。return 语句只会将值返回给当前函数的调用者，而不会将其输出到 HTTP 响应体中。为了让客户端的 AJAX 请求能够接收到这些数据，您需要使用 echo 语句将 JSON 字符串直接输出。
修正后的 PHP 代码
private function messageSend(){
$user_id = $_SESSION['user_id'];
$message = $_POST['message'];
// 设置响应头，告知客户端返回的是 JSON 数据
header('Content-Type: application/json');
if (empty($message)) { // 推荐使用 empty() 而不是 == null
echo json_encode(array(
'status' => false,
'message' => 'Please Enter Message'
));
exit; // 终止脚本执行，避免后续代码干扰
}
// 假设 NoteModel::contact_message 成功执行
$sendTime = getCurrentDateTime();
$result = NoteModel::contact_message($user_id, $message, $sendTime);
if ($result) { // 根据实际的模型返回结果判断是否成功
echo json_encode(array(
'status' => true,
'message' => 'Message Send Success'
));
} else {
echo json_encode(array(
'status' => false,
'message' => 'Failed to Send Message'
));
}
exit; // 终止脚本执行
}关键改进点：
通过以上修改，您已经建立了一个完整的 AJAX 消息响应机制：
进一步的注意事项：
遵循这些最佳实践，您将能够构建出高效、健壮且用户友好的 AJAX 交互功能。
以上就是如何使用 PHP 和 AJAX 处理并显示消息响应的详细内容，更多请关注php中文网其它相关文章！
PHP怎么学习？PHP怎么入门？PHP在哪学？PHP怎么学才快？不用担心，这里为大家提供了PHP速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
274
收藏
