0
I’m trying to make a table where its contents come from an http. I am using Ajax and Json to pull the content but does not return anything on the screen other than what is written in HTML. I’m still beginner, someone could give me a light?
In the url I changed the name of the path because I do not know if I can disclose it, but it is the same.
Before inserting headers: {'X-Requested-With': 'Xmlhttprequest'} the console gave me the Cross-Origin error Request Blocked: The Same Origin Policy disallows Reading the remote Resource at http://example/example/example/example/example/example/? _=1551360232378. (Reason: CORS request Did not Succeed)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table table-responsive table-hover table-bordered" id="gp_table">
<thead>
<tr>
<th>Cdgrupo</th>
<th>Grupos</th>
<th>Inativo</th>
</tr>
</thead>
</table>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({
url: "http://exemplo/exemplo/exemplo/exemplo/exemplo/",
headers: {'X-Requested-With': 'XMLHttpRequest'}
dataType: 'json',
type: 'get',
cache:false,
success: function(data){
/*console.log(data);*/
var event_data = '';
$.each(data, function(index, value){
/*console.log(value);*/
event_data += '<tr>';
event_data += '<td>'+value.Cdgrupo+'</td>';
event_data += '<td>'+value.Grupos+'</td>';
event_data += '<td>'+value.Inativo+'</td>';
event_data += '</tr>';
});
$("#gp_table").append(event_data);
},
error: function(d){
/*console.log("error");*/
alert("Não foi carregado.");
}
});
});
</script>
</html>
Json is like this:
[
{
Cdgrupo: 1,
Grupos: "MADEIRA ",
Inativo: 0
},
{
Cdgrupo: 2,
Grupos: "SEGURANCA E EPIS",
Inativo: 0
},
{
Cdgrupo: 3,
Grupos: "INFORMATICAS E ACESSORIOS",
Inativo: 0
}
]
EDIT: From an extension of Chrome I was able to make everything appear right, so the code is written right. Only remaining to solve the error that gives when I try without using the extension, and in turn in another browser.
Error: Cross-Origin Request Blocked: The Same Origin Policy disallows Reading the remote Resource at http://example/example/example/example/example/example/? _=1551360232378. (Reason: CORS request Did not Succeed)
I still have a basic knowledge mto, how can I solve? Pull from a local file to what I am trying to do does not solve.
– Gabriel Midão
The page requested in
url:have to return only a valid JSON, otherwise error because thedataType: 'json'will try to parse the return and if it is not JSON this return will enter the error.– Sam
I put my JSON, that’s correct?
– Gabriel Midão
The syntax is a valid Javascript object, but not a valid JSON. JSON is a format based on Javascript syntax - every JSON is a valid object, but not every object is a valid JSON. In JSON, attribute names should be declared between double quotes,
"Cdgrupo","Grupos","Cdgrupo"– Andre
The JSON I put in is coming from its source, http. I can’t edit it. I thought that in this case I would be recognized.
– Gabriel Midão
Missing a comma after
headers: {'X-Requested-With': 'XMLHttpRequest'}... I removed the answer because the problem seems to be different and not just that of the comma.– Sam
This problem is what I’m having now: Access to Xmlhttprequest at 'http://example/example/example/example/example/? _=1551364713192' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested Resource.
– Gabriel Midão