Laravel中AJAX更新评论后显示undefined问题排查

数据库更新操作已成功完成，但AJAX请求后页面文本显示为'undefined'。使用location.reload()可以正常显示更新后的内容，但不想通过页面刷新解决，求问题原因及修复方案。

相关代码 #

HTML代码 #

<div class="content mt-4 rounded-3 border border-secondary">
        @foreach ($comments as $comment)
        @if ($comment->product_id == $productId && $comment->flow_num == $flow)
        <p>
            comment : <span id="comment{{ $comment->id }}">{{ $comment->comments }}</span>
            <button type="" class="btn btn-success confirm-btn">ok</button>
            <button type="" class="btn btn-primary" id="edit{{ $comment->id }}" onclick="editComment({{ $comment->id }})" type="submit">edit</button>
            <form action="" method="POST" id="deleteForm{{ $comment->id }}">
                @csrf
                <input type="hidden" name="comment-id" value="{{ $comment->id }}">
                <button type="button" class="btn btn-danger" onclick="confirmDelete({{ $comment->id }})">delete</button>
            </form>
        </p>
        @endif
        @endforeach
    </div>

JavaScript代码 #

function editComment(commentId) {
        const commentSpan = document.getElementById(`comment${commentId}`);
        const editButton = document.getElementById(`edit${commentId}`);

        if (commentSpan && editButton) {
            const commentText = commentSpan.innerText;
            const inputElement = document.createElement('input');
            inputElement.type = 'text';
            inputElement.value = commentText;
            inputElement.name = `comment${commentId}`;
            inputElement.classList.add('form-control');

            commentSpan.innerText = '';
            commentSpan.appendChild(inputElement);

            editButton.innerText = 'save';
            editButton.onclick = () => saveComment(commentId);
        }
    }


    function saveComment(commentId) {
        const commentSpan = document.getElementById(`comment${commentId}`);
        const editButton = document.getElementById(`edit${commentId}`);
        const inputElement = commentSpan.querySelector('input');

        if (inputElement) {
            const commentText = inputElement.value;
            fetch("{{ route('comment.update') }}", {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'X-CSRF-TOKEN': '{{ csrf_token() }}'
                },
                body: JSON.stringify({
                    commentId: commentId,
                    commentText: commentText
                })
            })
            .then(response => {
                if (!response.ok) {
                    throw new Error('Failed to save comment');
                }
                return response.json();
            })
            .then(data => {
                commentSpan.innerText = data.commentText;
                editButton.innerText = 'edit';
                editButton.onclick = () => editComment(commentId);
            })
            .catch(error => {
                console.error(error);
                alert('failed');
            });
        }
    }

Controller代码 #

public function update(Request $request, comments $comments)
    {

        $requestDataId = $request->commentId;
        $requestDataText = $request->commentText;


        try {
            
            $comment = comments::where('id', $requestDataId)->first();
            if (!$comment) {
                return response()->json(['error' => 'cant find'], 404);
            }


            $comment->comments = $requestDataText;
            $comment->save();
        } catch (\Exception $e) {

            Log::error($e->getMessage());

            return response()->json(['error' => 'error'], 500);
        }

        return response()->json(['success' => true]);
    }

问题原因及修复方案 #

原因 #

前端代码中尝试读取data.commentText来更新页面显示，但后端Controller成功返回的JSON仅包含success: true，没有commentText字段，因此读取结果为undefined。

修复方案 #

方案1：修改后端返回内容

在Controller的成功响应中添加更新后的评论文本，确保和前端字段对应：

// 替换原返回语句
return response()->json([
    'success' => true,
    'commentText' => $comment->comments // 返回数据库中实际存储的更新后内容
]);

方案2：直接使用前端输入内容更新页面

如果不需要验证后端存储结果，可直接用前端输入的commentText更新页面，省去后端返回字段的步骤：

// 在saveComment的then回调中修改
.then(data => {
    commentSpan.innerText = commentText; 
    editButton.innerText = 'edit';
    editButton.onclick = () => editComment(commentId);
})

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