如何在PHP+Ajax开发中接收接口响应并在页面展示消息提示

1. 后端PHP代码调整 #

你当前的messageSend方法仅返回了JSON字符串，接口需要主动输出JSON内容才能被前端接收，修改逻辑如下：

private function messageSend(){
    $user_id = $_SESSION['user_id'];
    $message = $_POST['message'];
    if ($message == null) {
        // 输出JSON后终止执行，不要仅用return
        echo json_encode(array(
            'status' => false,
            'message' => 'Please Enter Message'
        ));
        exit;
    }
    $sendTime = getCurrentDateTime();
    NoteModel::contact_message($user_id, $message, $sendTime);
    echo json_encode(array(
        'status' => true,
        'message' => 'Message Send Success'
    ));
    exit;
}

注意：如果该方法是被上层控制器调用，也可以在上层逻辑中执行echo $this->messageSend();后加exit，效果一致。

2. 页面新增提示容器 #

在表单页面的合适位置（表单上方/下方均可）新增提示展示用的DOM元素：

<!-- 提示容器，默认隐藏 -->
<div id="tipBox" style="display: none; padding: 12px; margin: 15px 0; border-radius: 4px;"></div>

3. 前端Ajax代码修改 #

调整Ajax配置补充JSON解析规则，同时在成功回调中增加提示展示逻辑：

<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 },
            // 新增配置：指定返回数据类型为JSON，jQuery会自动完成解析
            dataType: 'json',
            success: function (data) {
                $('#contactform')[0].reset();
                // 处理返回结果生成提示
                var $tip = $('#tipBox');
                if(data.status) {
                    // 成功提示样式：绿色背景
                    $tip.css({'background': '#e6f4ea', 'color': '#1e7e34'}).text(data.message);
                } else {
                    // 失败提示样式：红色背景
                    $tip.css({'background': '#f8d7da', 'color': '#721c24'}).text(data.message);
                }
                // 显示提示
                $tip.show();
                // 可选：3秒后自动隐藏提示，不需要可删除该段逻辑
                setTimeout(function(){
                    $tip.hide();
                }, 3000);
            }
        });
    });
});
</script>

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