使用PHP(MVC)结合AJAX实现同页面提交并展示数据的问题咨询

现有代码问题排查 #

• AJAX请求的data参数中postStatus变量未定义，会触发JS报错导致请求无法发送
• 控制器postStatus方法没有返回处理结果，前端无法获取提交状态
• 页面内POST请求处理逻辑没有输出响应内容，AJAX回调接收到的结果为空
• 未编写提交成功后的DOM更新逻辑，无法实现同页面展示效果

MVC架构下的实现逻辑 #

MVC三层分工明确，不要跨层处理逻辑：

1. Model层：仅负责数据库读写操作，本次场景下实现状态数据的新增入库逻辑即可
2. Controller层：接收前端提交的参数，调用Model完成数据写入，封装处理结果（成功/失败状态、提示信息、新增的状态数据）返回
3. View层：负责页面渲染、用户交互绑定，接收到Controller返回的结果后更新页面DOM，无需刷新页面即可展示提交结果

代码调整 #

1. 控制器代码修改 #

新增返回值，封装标准响应结构：

function postStatus($group_id){ 
  $status = new ManageGroupsModel(); 
  $status->group_id = $group_id; 
  $status->status_content = $_POST['status_content']; 
  $response = [];
  if($status->postStatus() > 0) { 
    $response['code'] = 1;
    $response['msg'] = "状态发布成功";
    // 可根据需求返回刚发布的内容，用于前端即时展示
    $response['data'] = [
        'content' => $status->status_content,
        'publish_time' => date('Y-m-d H:i:s')
    ];
  } else {
    $response['code'] = 0;
    $response['msg'] = "发布失败，请重试";
  }
  return $response;
}

2. view_group.php 后端处理逻辑修改 #

收到AJAX请求后返回JSON格式响应，输出后终止执行避免返回整个页面内容：

if(isset($_POST['postStatus'])){ 
    $result = $status->postStatus($group_id); 
    // 设置响应头为JSON格式
    header('Content-Type: application/json; charset=utf-8');
    echo json_encode($result, JSON_UNESCAPED_UNICODE);
    exit;
} 
?>

3. 前端JS代码修改 #

修复变量错误，新增结果处理和DOM更新逻辑：

<script type = "text/javascript" >
  $(document).ready(function() {
    $("#submit").click(function(event) {
      event.preventDefault();
      var status_content = $('#status_content').val().trim();
      // 非空校验
      if(status_content === ''){
          $('#result').text('发布内容不能为空').css('color','red');
          return;
      }
      $.ajax({
        type: "POST",
        url: "view_group.php",
        dataType: "json",
        data: {
          postStatus: 1, // 传入固定标识用于后端判断请求类型
          status_content: status_content
        },
        success: function(res) {
          if(res.code === 1){
            $('#result').text(res.msg).css('color','green');
            // 如果需要展示刚发布的内容，可追加到对应容器中，示例如下：
            // $('#status_container').prepend('<div class="status-card">'+ res.data.content +'<p><small>'+ res.data.publish_time +'</small></p></div>');
            // 清空输入框
            $('#status_content').val('');
          }else{
            $('#result').text(res.msg).css('color','red');
          }
        },
        error: function(){
          $('#result').text('网络异常，请稍后重试').css('color','red');
        }
      });
    });
  }); 
</script>

内容的提问来源于stack exchange，提问作者user17291374