Click here to Skip to main content
14,298,696 members
Rate this:
Please Sign up or sign in to vote.
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
Posted
Updated 5 days ago
Comments
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

http://localhost/mysite
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
   
Comments
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