javascript - AJAX 调用的结果，jQuery .append() 不适用于 Laravel 5.4

Question

我正在尝试 .append() 在我的 Laravel 5.4 应用程序中调用 AJAX 的结果，但是附加不起作用，我的控制台中没有出现任何错误。

ajax.js:

$( document ).ready(function() {
    $('#storeComment').on('submit', function(e) {
        e.preventDefault();

        // Retrieve form data
        var formData = new FormData();

        var data = $(this).serializeArray();
        $.each(data, function(index, field) {
            formData.set(field.name, field.value);

        });
        axios.post('/comments', formData, { headers: {'Content-Type': 'multipart/form-data' }}
            ).then(function(response) {
            let newComment = "<div class='comment'><p><strong>" + response.data.user.name + "</strong>" 
                + response.data.comment.created_at + "</p><p>" + response.data.comment.comment + "</p><hr></div>";
            console.log(newComment);

            $(".comments").append(newComment);
        });
    });
});

 console.log(newComment); 

结果:

<div class='comment'><p><strong>admin</strong>2018-10-10 06:39:20</p><p>a</p><hr></div>

html:

<div class="comments">
    @forelse ($imageRequest->comments as $comment)
     <div class="comment">
       <p><strong>{{ $comment->user->name }}</strong> {{$comment->created_at}}</p>
       <p>{{ $comment->comment }}</p>
       <hr>
     </div>
    @empty
       <p>@lang('image_request.show.nocomments')</p>
    @endforelse
</div>

数据很好，不幸的是只有追加不起作用。

Answer 1

在你的情况下，错误可能已经出现，但你还没有检查它:尝试如下捕获错误:

    axios.post('/comments', formData, { headers: {'Content-Type': 'multipart/form-data' }}
        ).then(function(response) {
        let newComment = "<div class='comment'><p><strong>" + response.data.user.name + "</strong>" 
            + response.data.comment.created_at + "</p><p>" + response.data.comment.comment + "</p><hr></div>";
        console.log(newComment);

        $(".comments").append(newComment);
    })
    .catch(function (error) {
       // handle error
        console.log(error);
     });