PHP与AJAX消息响应机制：实现前端实时反馈教程

<script>
  $(document).ready(function () {
    // 假设页面上有一个ID为 'contactform' 的表单和一个提交按钮
    $('.btn-primary').click(function (e) {
      e.preventDefault(); // 阻止表单默认提交行为
      var message = $('#message').val(); // 获取输入框中的消息内容

      $.ajax({
        type: "POST", // 请求方法为POST
        url: "<?=baseUrl()?>/page/contact", // 请求的URL
        data: { "message": message }, // 发送的数据
        success: function (data) {
          // 成功回调函数，原始代码中只重置了表单
          $('#contactform')[0].reset();
        },
        error: function(xhr, status, error) {
          // 错误处理，建议添加
          console.error("AJAX请求失败:", status, error);
        }
      });
    });
  });
</script>

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

      // 假设页面上有一个用于显示消息的元素，例如：<div id="responseMessage"></div>
      var $responseMessageDiv = $('#responseMessage');
      $responseMessageDiv.empty().removeClass('alert-success alert-danger'); // 清除旧消息和样式

      $.ajax({
        type: "POST",
        url: "<?=baseUrl()?>/page/contact",
        data: { "message": message },
        success: function (data) {
          // 尝试解析服务器返回的JSON字符串
          try {
            var response = JSON.parse(data);

            // 现在可以访问JSON对象中的数据
            var status = response.status;
            var message = response.message;

            // 根据状态显示不同的消息和样式
            if (status) {
              $responseMessageDiv.text(message).addClass('alert-success');
              $('#contactform')[0].reset(); // 消息发送成功后重置表单
            } else {
              $responseMessageDiv.text(message).addClass('alert-danger');
            }
          } catch (e) {
            console.error("解析JSON响应失败:", e);
            $responseMessageDiv.text("服务器响应格式错误。").addClass('alert-danger');
          }
        },
        error: function(xhr, status, error) {
          console.error("AJAX请求失败:", status, error);
          $responseMessageDiv.text("请求失败，请稍后再试。").addClass('alert-danger');
        }
      });
    });
  });
</script>

private function messageSend(){
    $user_id = $_SESSION['user_id'];
    $message = $_POST['message'];

    if ($message == null) {
        // 错误情况下返回JSON编码的数组
        return json_encode(array(
            'status' => false,
            'message' => 'Please Enter Message'
        ));
    }

    $sendTime = getCurrentDateTime();
    NoteModel::contact_message($user_id, $message, $sendTime);

    // 成功情况下返回JSON编码的数组
    return json_encode(array(
        'status' => true,
        'message' => 'Message Send Success'
    ));
}

private function messageSend(){
    // 设置响应头，告知前端返回的是JSON数据
    header('Content-Type: application/json');

    $user_id = $_SESSION['user_id'] ?? null; // 建议检查session是否存在或进行更安全的处理
    $message = $_POST['message'] ?? ''; // 使用null合并运算符或三元运算符防止未定义索引错误

    if (empty($message)) { // 检查消息是否为空
        echo json_encode(array(
            'status' => false,
            'message' => 'Please Enter Message'
        ));
        exit; // 输出后终止脚本执行
    }

    // 假设NoteModel::contact_message()是同步操作
    // 实际项目中，这里可能需要try-catch来处理数据库操作异常
    try {
        $sendTime = getCurrentDateTime();
        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; // 输出后终止脚本执行
}

<form id="contactform">
  <div class="form-group">
    <label for="message">Your Message</label>
    <textarea class="form-control" id="message" rows="5"></textarea>
  </div>
  <button type="submit" class="btn btn-primary">Send Message</button>
  <!-- 用于显示服务器响应消息的区域 -->
  <div id="responseMessage" class="mt-3"></div>
</form>