admin管理员组

文章数量:1405901

I am trying to use jQuery AJAX to pull text from a text file called "randomtext.txt"in the same directory as the html file and place it inside a div with an id of ajax_div, upon the click of a button. However, this does not work.The browser cannot find the text file. I checked the browser log on chrome and I get this error:

XMLHttpRequest cannot load file:///C:/xampp/htdocs/randomtext.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox logs this error:

[20:07:55.847] syntax error @ file:///C:/xampp/htdocs/randomtext.txt:1 [20:07:55.849] syntax error @ file:///C:/xampp/htdocs/jquery_ajax.html:1

The following is my code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src ="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button#ajax_click").click(function() {
                jQuery.ajax({url: "randomtext.txt",success: function(result) {$("div#ajax_div").html(result);}});
            });
        });
    </script>
</head>
<body>
    <div id = "ajax_div"></div>
    <button id="ajax_click">Click me!</button>
</body>
</html>

I've gone through other solutions such as putting in the entire file directory in place of the url, but to no avail.

Thank You

I am trying to use jQuery AJAX to pull text from a text file called "randomtext.txt"in the same directory as the html file and place it inside a div with an id of ajax_div, upon the click of a button. However, this does not work.The browser cannot find the text file. I checked the browser log on chrome and I get this error:

XMLHttpRequest cannot load file:///C:/xampp/htdocs/randomtext.txt. Received an invalid response. Origin 'null' is therefore not allowed access.

Firefox logs this error:

[20:07:55.847] syntax error @ file:///C:/xampp/htdocs/randomtext.txt:1 [20:07:55.849] syntax error @ file:///C:/xampp/htdocs/jquery_ajax.html:1

The following is my code:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src ="jquery-2.0.3.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("button#ajax_click").click(function() {
                jQuery.ajax({url: "randomtext.txt",success: function(result) {$("div#ajax_div").html(result);}});
            });
        });
    </script>
</head>
<body>
    <div id = "ajax_div"></div>
    <button id="ajax_click">Click me!</button>
</body>
</html>

I've gone through other solutions such as putting in the entire file directory in place of the url, but to no avail.

Thank You

Share asked Jun 2, 2014 at 14:28 saadsaad 2113 silver badges14 bronze badges 1
  • 3 I see that you are using xampp, but you are working localy. xampp provides you an apache server, service that should be started in your machine. Just type http://localhost/ at browser and look if you see the index file stored in xampp htdocs folder – kosmos Commented Jun 2, 2014 at 14:46
Add a ment  | 

2 Answers 2

Reset to default 4

You cannot use ajax to load local files due to security access restrictions.

This may help; How to launch html using Chrome at "--allow-file-access-from-files" mode?

Another solution could be to use XAMPP, WAMP or just to develop on server.

edit: Oh, didnt notice You are Using xampp; just run Your file through http://localhost/ instead of file://.

The error you're getting indicates that you're using file:// URLs. You will probably find that running this code on a local http server instance will alleviate the issue (i.e. loading up proper http resources via ajax).

As an aside, mixing file:///c:/ and http://localhost requests -- even if your browser allows the former -- still may fail for ajax calls as the browser will not detect that these URLs are ing from the same same host (even though they are on the same machine).

本文标签: javascriptJQuery AJAX cannot find a text file in the same directoryStack Overflow