我正在尝试从数据库中检索数据，但我得到错误的"资源解释为文档，但使用MIME Type Application/json转移：/"<</p>
使用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);
}
尝试在您的。
中设置Content-Type: application/json标头 xmlhttp.open("POST","/",true);
xmlhttp.setRequestHeader("Content-Type", "application/json");
xmlhttp.send();