资源解释为Document但使用MIME类型application / json，laravel进行传输

Question

I'm trying to retrive data from a database but I get the error “Resource interpreted as Document but transferred with MIME type application/json: "http://127.0.0.1:8000/"”.

Page loads with JSON array.

[{"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}]

I'm unable to use data to insert it in any tags. This is the code of the view.

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

And this is the controller's code.

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

Answer 1

Try setting Content-Type: application/json header in your.

xmlhttp.open("POST","/",true);
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send();