Почему ajax не показывает содержимое обновленного JSON? - PullRequest
Новая
       0

Почему ajax не показывает содержимое обновленного JSON?

0 голосов
/ 20 марта 2020

Я новичок в JavaScript. Я хочу отправить запрос ajax, получить содержимое файла JSON и просто поместить его в div. Это мой код: 

<!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>

А это пользователи. json: 

[
    {
        "id":1,
        "name":"Rick",
        "email":"rick@gmail.com"
    },
    {
        "id":2,
        "name":"Negan",
        "email":"negan@gmail.com"
    }

]

Это отлично работает. Но когда я вручную обновляю пользователей. json, меняю его и обновляю sh браузер, браузер не показывает обновленный json. Это все еще дает мне предыдущий json файл. Как я могу это исправить?

Ответы [ 3 ]

1 голос
/ 20 марта 2020

попробуйте установить флажок disable cache на сетевой панели инструмента dev.

это может быть вызвано кешем вашего веб-сервера

1 голос
/ 20 марта 2020

Возможно, что браузер отвечает cached ответом.

Попробуйте добавить 'timestamp', чтобы каждый раз на сервер поступал новый запрос для получения обновленного содержимого. 

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>

Поскольку вы включили jQuery на свою веб-страницу, я бы рекомендовал использовать jQuery версию ajax. Чтобы запретить использование кэшированных результатов, установите cache на 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.
    }
});
0 голосов
/ 20 марта 2020

Вам нужно передать заголовок

content_type = "application / json"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...