CODEWITHSUNDEEP
javascriptajax
AmirX
AmirX

Reputation: 2717

Why doesn't ajax show the content of updated JSON?

I am new to JavaScript. What I want to do is sending an ajax request and get the content of a JSON file and simply put it into a div. This is my code:

<!DOCTYPE html>
<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <title>Ajax 1 - Text File</title>
</head>
<body>
    <button id="button">Get Text File</button>   
    <br><br>
    <div id="text"></div>
    <script>
        document.getElementById("button").addEventListener('click', loadText);

        function loadText(){
            var xhr = new XMLHttpRequest();
            xhr.open('GET', 'users.json', true);

            xhr.onload = function(){
                if(this.status == 200){

                    document.getElementById('text').innerHTML = this.responseText;
                }
                else if (this.status == 404){
                    document.getElementById('text').innerHTML = 'not found';
                }
            }
            xhr.send();
        }

    </script>
</body>
</html>

And this is users.json:

[
    {
        "id":1,
        "name":"Rick",
        "email":"[email protected]"
    },
    {
        "id":2,
        "name":"Negan",
        "email":"[email protected]"
    }

]

This works fine. But, when I manually updated users.json and change it and refresh the browser, the browser does not show the updated json. It still gives me the previous json file. How can I fix it?

Upvotes: 0

Views: 44

Answers (3)

Shantun Parmar
Shantun Parmar

Reputation: 429

You need to pass header

content_type="application/json"

Upvotes: 0

bryce on the tree
bryce on the tree

Reputation: 19

try check the disable cache checkbox on network panel of the dev tool.

it might be caused by the cache of your web server

Upvotes: 1

Rayon
Rayon

Reputation: 36599

It is possible that the browser is responding with a cached response.

Try appending 'timestamp' so that every time a new request would be made to the server to get updated contents.

document.getElementById("button").addEventListener('click', loadText);

function loadText() {
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'users.json?ts=' + Date.now(), true);

  xhr.onload = function() {
    if (this.status == 200) {

      document.getElementById('text').innerHTML = this.responseText;
    } else if (this.status == 404) {
      document.getElementById('text').innerHTML = 'not found';
    }
  }
  xhr.send();
}

<button id="button">Get Text File</button>
<br><br>
<div id="text"></div>

As you have included jQuery in your webpage, I would recommend to use jQuery version of ajax. To disallow the use of the cached results, set cache to false.

$.ajax({
    url: 'myurl',
    type: 'GET',
    dataType: 'json',
    data: jsonDataObject,
    cache: false, // Appends _={timestamp} to the request query string
    success: function(data) {
        // data is a json object.
    }
});

Upvotes: 1

Related Questions