显示代码而不是 html 元素答案

【问题标题】：Codes are displayed instead of html elements显示代码而不是 html 元素
【发布时间】：2020-02-25 08:12:09
【问题描述】：

我在某个时间间隔内调用了 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"
}

当我在 json 中发送 HTML 时发生了同样的事情。

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);

在这种情况下，它显示

【问题讨论】：

收到数据后，您实际上在做什么？你是要把它放到一个div中，还是替换当前页面的内容？ success: function (data) { /* what goes here? document.body.innerHTML=data.html ? */ }
我已经更新了我的问题，我在第一部分什么也没做，而是在第二部分替换了 div。
好的，我想我明白你在做什么了。我在下面更新了我的答案。让我知道它是否适合您。

标签： html ajax laravel

【解决方案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，我将答案更改为适合。

【讨论】：

【解决方案2】：

不是以json形式返回，而是以数组形式返回数据：

试试这样的

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

【讨论】：

这就是他在他的问题中所做的。读取最后一个代码块。 Laravel 无论如何都会将其转换为 JSON - 因为他请求数据为 json dataType: 'json',