Коды отображаются вместо элементов HTML

Question

Я вызвал ajax-запрос в некоторый интервал времени. Теперь, если после нажатия ajax я нажал кнопку «Назад», браузер отобразил весь мой HTML-код вместо элементов HTML.

<script>
    window.setInterval(function () {
        $.ajax({
            method: 'GET',
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            url: '{{route('devices.index')}}',
            dataType: 'json',
            success: function (data) {
            }
        });
    }, 1000);
</script>

if($request->ajax()){
            foreach ($devices as $device){
                $latestUpdate = Carbon::parse($device->updated_at);
                $diff = Carbon::now()->diffInMinutes($latestUpdate);
                if($diff > 2){
                    Device::where('id',$device->id)->update(['status'=>'3']);
                }
            }
            return response()->json(['msg' => "successfully checked"]);
        }

Я ожидал отобразить элементы HTML, но это

{
"msg": "successfully checked"
}

То же самое происходило, когда я отправлял HTML в формате json.

if($request->ajax()){
            $returnHtml = view('alerts.index', compact('threshold'))
                ->with('alerts', $alerts)->render();
            return response()->json(['html' => $returnHtml, 'data' => $alerts]);
        }

window.setInterval(function () {
    $.ajax({
                method: 'GET',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                url: '{{route('alerts.index')}}',
                dataType: 'json',
                success: function (data) {
                    var formatedhtml = $('<div>').html(data.html).find('table');
                    $('table').html(formatedhtml);
                }
            });
        }, 5000);

В этом случае отображается

Answer 1

Нет ничего плохого в том, как вы получаете данные, когда используете return response()->json(['html' => $returnHtml, 'data' => $alerts]);

Если вы действительно хотите поместить HTML, полученный от вашего сервера, в элемент на вашей странице, вам нужно будетиспользуйте Element.innerHTML (https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML), чтобы браузер не экранировал html.

window.setInterval(function () {
    $.ajax({
        method: 'GET',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
        url: '{{route('devices.index')}}',
        dataType: 'json',
        success: function (data) {

        // this is the table where you want to place the received table contents
        var my_table=$('#my-table')

        // we turn the data we received from the server into a jQuery object, then find the table we want data from
        var received_table=$(data.html).find('table')

        // switch out the table contents
        my_table.html(received_table.html())

        }
    });
}, 1000);

РЕДАКТИРОВАТЬ: Поскольку вы используете jQuery, я изменил ответ, чтобы соответствовать.

Answer 2

Вместо того, чтобы возвращать как json, возвращайте данные в виде массива:

Попробуйте что-то вроде этого

return ['html' => $returnHtml, 'data' => $alerts];