Click here to Skip to main content
14,298,696 members
Rate this:
Please Sign up or sign in to vote.
i use notepad to practice HTML and JQuery And Json
<pre><!DOCTYPE html>
<html lang="en">

    <title>گالری سگ ها</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="css/style.css" rel="stylesheet">


    <div id="menu">
        <button href="json.json">json</button>

    <div id="frame">


    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>


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;

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');

            url: textlinked,
            success: function() {

        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
Updated 5 days ago
F-ES Sitecore 6-Jul-17 5:54am
You'll need to create a website in IIS and host your files there and access it via http such as

Rate this:
Please Sign up or sign in to vote.

Solution 2

Firefox[^] will allow you to make AXAJ requests using the file: protocol if the page was loaded using the file: protocol.

Chrome, however, blocks this by default. To enable it, you need to launch Chrome from a command prompt, specifying the --allow-file-access-from-files flag.

javascript - AJAX request to local file system not working in Chrome? - Stack Overflow[^]
How to set the allow-file-access-from-files flag option in Google Chrome for Windows[^]

NB: You should only enable this when you're testing your own code. Once you're finished, close Chrome and restart it without the flag.
Rate this:
Please Sign up or sign in to vote.

Solution 4

thank you @karthik_mahalingam
CHill60 5 days ago
Please don't post comments (or questions) as solutions to old posts. Use the "Have a Question or Comment?" link next to the post you want to comment on (for comments there is a "Reply" link). That way the member will be notified of your response and the question will not reappear in the current questions list
Rate this:
Please Sign up or sign in to vote.

Solution 1

Host it in Web server[^] and try.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100