实现 PHP AJAX 消息响应与前端动态展示教程

private function messageSend(){
    // 假设 $_SESSION['user_id'] 已经设置
    $user_id = $_SESSION['user_id'] ?? null; // 使用 null 合并运算符处理未设置的情况
    $message = $_POST['message'] ?? null;

    // 数据验证
    if (empty($message)) {
        // 使用 echo 而非 return 将 JSON 字符串输出到 HTTP 响应体
        echo json_encode(array(
            'status' => false,
            'message' => 'Please Enter Message'
        ));
        exit(); // 终止脚本执行，确保只输出一次响应
    }

    // 假设 NoteModel::contact_message 负责保存数据
    $sendTime = getCurrentDateTime(); // 获取当前时间
    NoteModel::contact_message($user_id, $message, $sendTime);

    // 成功响应
    echo json_encode(array(
        'status' => true,
        'message' => 'Message Send Success'
    ));
    exit(); // 终止脚本执行
}

<script>
$(document).ready(function () {
  $('.btn-primary').click(function (e) {
    e.preventDefault(); // 阻止表单默认提交行为

    var message = $('#message').val(); // 获取输入框内容

    $.ajax({
      type: "POST", // 请求方法
      url: "<?=baseUrl()?>/page/contact", // 后端处理 URL
      data: { "message": message }, // 发送的数据
      success: function (data) {
        // 解析后端返回的 JSON 字符串
        var response = JSON.parse(data);

        // 现在可以像访问 JavaScript 对象一样访问数据
        var status = response.status;
        var message = response.message;

        // 根据 status 和 message 更新前端界面
        if (status) {
          // 例如，在某个 div 中显示成功消息
          $('#feedback-area').text(message).css('color', 'green');
          $('#contactform')[0].reset(); // 清空表单
        } else {
          // 显示错误消息
          $('#feedback-area').text(message).css('color', 'red');
        }

        // 可以在此处添加更多的 UI 更新逻辑，例如显示/隐藏加载动画等
      },
      error: function(jqXHR, textStatus, errorThrown) {
        // 处理 AJAX 请求失败的情况
        console.error("AJAX Error: ", textStatus, errorThrown);
        $('#feedback-area').text("An error occurred. Please try again.").css('color', 'red');
      }
    });
  });
});
</script>