hi
i use notepad to practice HTML and JQuery And Json
my HTML
<pre><!DOCTYPE html>
<html lang="en">
<head>
<title>گالری سگ ها</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<div id="menu">
<button href="json.json">json</button>
</div>
<div id="frame">
</div>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>
my css:
* {
font-family: 'Times New Roman', Times, serif;
font-size: 100%;
margin: 0;
padding: 0;
font-weight: normal;
font-style: normal;
box-sizing: border-box;
}
.clear:after {
clear: both;
display: table;
content: "";
}
.clear {
zoom: 1;
}
ul,
ol,
li {
list-style: none;
display: block;
}
div {
display: block;
margin: 0px;
padding: 0px;
}
a {
display: block;
text-decoration: none;
}
body {
background-color: #fff;
}
#menu {
width: 75%;
margin: auto;
background-color: yellow;
}
#menu button {
border: 2px solid blue;
color: white;
background-color: blue;
margin: 3px;
padding: 8px;
}
#frame {
width: 75%;
height: 700px;
border: 1px solid black;
margin: auto;
}
my json file is in same directory of Html file :
{
"employees": [
{ "firstName": "John", "lastName": "Doe" },
{ "firstName": "Anna", "lastName": "Smith" },
{ "firstName": "Peter", "lastName": "Jones" }
]
}
and my Jquer Code:
$(Document).ready(function() {
$('#menu button').click(function() {
var linked = $(this);
var textlinked = linked.attr('href');
$.ajax({
url: textlinked,
success: function() {
alert();
}
});
return false;
});
});
when i run my index file i Get error :
jquery-3.2.1.min.js:4 XMLHttpRequest cannot load file:///C:/Users/PC-01/Desktop/vs%20code/HtmlCSS/json.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.
How Can i solved this error
What I have tried:
i don't know what can i do for this problem