javascript — ресурс интерпретируется как документ, но передается с приложением MIME-типа / json, laravel

Я пытаюсь получить данные из базы данных, но я получаю сообщение об ошибке «Ресурс интерпретируется как документ, но передается с помощью приложения MIME типа / json:»http://127.0.0.1:8000/«».

Страница загружается с массивом JSON.

[{"id":1,"pic":"C:\\Users\\extra\\Downloads","type":"img","events_id":1,"created_at":"2017-04-18 19:16:02","updated_at":"2017-04-18 19:16:02","event":null},{"id":2,"pic":"background-pics-12.jpg","type":"img","events_id":2,"created_at":"2017-04-18 19:16:02","updated_at":"2017-04-18 19:16:02","event":null}]

Я не могу использовать данные, чтобы вставить их в какие-либо теги. Это код представления.

 <section class="no-padding" id="media">
<div class="container-fluid">

<ul id="hexGrid">
<!--@foreach($items as $item)

<li class="hex">
<div class="hexIn">
<a class="hexLink" href="#" id="{{$item->id}}"  role="button" data-toggle="modal" data-dismiss="modal"  data-target="#myModal">

<img src="{{$item->pic}}" alt="" />
<h1>sdfghjk</h1>
<p>Some sample text about the article this hexagon leads to</p>

</a>
</div>
</li>

@endforeach
-->
</ul>
</div>
</section>

<!-- Trigger the modal with a button -->
<!-- <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-dismiss="modal" data-target="#myModal">Open Modal</button>-->

<!-- Modal -->
<div class="modal fade" hidden="true" id="myModal" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="panel panel-filled">
<div class="panel-body">
<div class="modal-header">Events</div>
<div class="modal-body">

<div id="myCarousel" class="carousel slide" data-ride="carousel" >
<!-- Indicators -->

</div>
</div>
</div>
<script>
var xmlhttp;

xmlhttp = new XMLHttpRequest();

// var xhttp1=new XMLHttpRequest();

xmlhttp.onreadystatechange=function()
{
if(this.readyState==4 && this.status==200)
{
var arr=JSON.parse(this.responseText);
console.log(arr.result.length);
console.log(arr);
var count=arr.result.length;
if(count!=0)
{
for(var i=0;i<count;i++)
{
if(arr.result[i].Type=='img')
{  var listelement=document.createElement("LI");
listelement.setAttribute('id', arr.result[i].ID);
listelement.className += "hex";
var div=document.createElement("div");
div.className += "hexIn";
var image=document.createElement("img");

var heading=document.createElement("h1");

var parag=document.createElement("p");

image.src=arr.result[i].image.replace("\\","");

heading.innerHTML=arr.result[i].Date; //content of  heading
parag.innerHTML=arr.result[i].Name;
var anchor=document.createElement("a");
anchor.className += "hexLink";
anchor.setAttribute('href',"#");
anchor.appendChild(image);

anchor.appendChild(heading);
anchor.appendChild(parag);
div.appendChild(anchor);
listelement.appendChild(div);
var ule=document.getElementById("hexGrid");
ule.appendChild(listelement);
anchor.onclick = function(){

};
}
else {var listelement=document.createElement("LI");
listelement.setAttribute('id', arr.result[i].ID);
listelement.className += "hex";
var div=document.createElement("div");
div.className += "hexIn";
var image=document.createElement("iframe");

var heading=document.createElement("h1");

var parag=document.createElement("p");
var divv=document.createElement("div");
image.style["width"] = "auto";
image.style["height"] = "auto";
image.src=arr.result[i].image.replace("\\","");

heading.innerHTML=arr.result[i].Date; //content of  heading
parag.innerHTML=arr.result[i].Name;
var anchor=document.createElement("a");
anchor.className += "hexLink";
anchor.setAttribute('href',"#");
divv.appendChild(image);
anchor.appendChild(divv);

anchor.appendChild(heading);
anchor.appendChild(parag);
div.appendChild(anchor);
listelement.appendChild(div);
var ule=document.getElementById("hexGrid");
ule.appendChild(listelement);}
}
}
else { var parag=document.createElement("p");parag.innerHTML="nmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmo";
var ule=document.getElementById("hexGrid");
ule.appendChild(parag);};

}
};

xmlhttp.open("POST","/",true);
xmlhttp.send();
</script>
<script>
$(document).ready(function(){
$("#myModal").on("show.bs.modal", function(e) {
e.preventDefault();

//var id1 = $(e.relatedTarget).data('target-id');
// var id2 = $(e.relatedTarget).data('target');
var id3 = e.relatedTarget.id;

//  console.log('Val1=' + id1 + '; Val2=' + id2 + '; Val3=' + id3);

$.get('/' + id3, function( data ) {
alert(data);
$(".modal-body").html(data);
});

});
});
</script>

И это код контроллера.

 public function getmedia()
{
$event=Events::all();
$items = Media::with('event')->get();
$e=$items->unique('events_id');
$e->values()->all();
return response()->json($e);
}