PHP与jQuery AJAX交互：实现表单提交及服务端JSON响应处理

<!-- 确保引入jQuery库 -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<!-- 假设有一个表单和提交按钮 -->
<form id="contactform">
    <input type="text" id="message" placeholder="请输入您的消息">
    <button type="submit" class="btn-primary">发送消息</button>
</form>
<div id="responseMessage" style="margin-top: 10px;"></div>

<script>
$(document).ready(function () {
  $('.btn-primary').click(function (e) {
    e.preventDefault(); // 阻止表单默认提交行为
    var message = $('#message').val(); // 获取输入框的值

    $.ajax
    ({
      type: "POST", // 请求方法为POST
      url: "<?=baseUrl()?>/page/contact", // 后端处理URL，请替换为您的实际URL
      data: { "message": message }, // 发送的数据，键名为 "message"
      success: function (data) {
        // 成功回调函数，初始阶段仅重置表单，后续将处理响应
        $('#contactform')[0].reset();
      }
    });
  });
});
</script>

<?php
// 假设这是一个控制器方法或独立函数
// 建议在实际应用中设置正确的Content-Type头
// header('Content-Type: application/json');

private function messageSend(){
    // 从SESSION中获取用户ID，用于数据库操作，注意安全性
    $user_id = $_SESSION['user_id'] ?? null; 
    // 获取POST请求中的消息内容
    $message = $_POST['message'] ?? null;

    // 输入验证：检查消息是否为空
    if (empty($message)) {
        // 如果消息为空，返回一个错误状态和消息
        // 关键点：使用 echo 而不是 return 来输出 JSON 响应
        echo json_encode(array(
            'status' => false,
            'message' => 'Please Enter Message'
        ));
        exit; // 终止脚本执行，避免输出额外内容
    }

    // 获取当前时间戳或日期时间
    $sendTime = getCurrentDateTime(); // 假设这是一个获取当前日期时间的函数

    // 假设 NoteModel::contact_message 用于将消息保存到数据库
    // 实际应用中需要进行更完善的错误处理，例如try-catch
    try {
        NoteModel::contact_message($user_id, $message, $sendTime);
        // 如果消息发送成功，返回一个成功状态和消息
        echo json_encode(array(
            'status' => true,
            'message' => 'Message Send Success'
        ));
    } catch (Exception $e) {
        // 数据库操作失败，返回错误信息
        echo json_encode(array(
            'status' => false,
            'message' => 'Failed to send message: ' . $e->getMessage()
        ));
    }
    exit; // 终止脚本执行
}
?>

<script>
$(document).ready(function () {
  $('.btn-primary').click(function (e) {
    e.preventDefault();
    var message = $('#message').val();

    // 简单的客户端验证
    if (message.trim() === '') {
        $('#responseMessage').text('请输入消息内容。').css('color', 'orange');
        return;
    }

    $.ajax
    ({
      type: "POST",
      url: "<?=baseUrl()?>/page/contact",
      data: { "message": message },
      success: function (data) {
        // 解析JSON字符串为JavaScript对象
        var response = JSON.parse(data); 

        // 现在可以访问JSON对象的属性了
        var status = response.status;
        var message = response.message;

        // 根据状态和消息在页面上显示反馈
        if (status) {
            // 显示成功消息，并重置表单
            $('#responseMessage').text(message).css('color', 'green');
            $('#contactform')[0].reset(); 
        } else {
            // 显示错误消息
            $('#responseMessage').text(message).css('color', 'red');
        }

        // 可选：一段时间后隐藏消息
        setTimeout(function() {
            $('#responseMessage').text('');
        }, 3000);
      },
      error: function(xhr, status, error) {
        // 处理AJAX请求失败的情况（如网络错误、服务器500错误等）
        console.error("AJAX Error: ", status, error, xhr.responseText);
        $('#responseMessage').text('请求失败，请稍后再试。').css('color', 'red');
        setTimeout(function() {
            $('#responseMessage').text('');
        }, 3000);
      }
    });
  });
});
</script>