HTML / JS / JQuery / AJAX работает на html-превьюере Atom, но не на браузере - PullRequest
Новая
       3

HTML / JS / JQuery / AJAX работает на html-превьюере Atom, но не на браузере

0 голосов
/ 22 февраля 2019

Я работаю над проектом html / js, который извлекает объекты JSON из API https://quotesondesign.com/the-api/.Следующий код работает нормально, когда я использую Atom html-previewer, однако, когда я пытаюсь открыть его с помощью Firefox или Chrome, JS не работает должным образом.Ни цитата, ни автор не найдены.Это часть проекта FreeCodeCamp.

Вот код JS, CSS и HTML:

$(document).ready(function() {
  let quote;
  let author;

  getQuote();

  function getQuote() {
    $.ajaxSetup({ cache: false });
    $.ajax({
      type: 'GET',
      url: 'http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1',
      success: function(data){
        quote = data[0].content;
        author = data[0].title;
        $("#text").html(quote);
        $("#author").html('-' + author);
      }
    });
    /*$.ajaxSetup({ cache: false });
    $.getJSON("http://quotesondesign.com/wp-json/posts?filter[orderby]=rand&filter[posts_per_page]=1", function(a) {
  quote = a[0].content;
  author = a[0].title;
  $("#text").html(quote);
  $("#author").html('-' + author);
});*/
  };
  $("#new-quote").on("click", function(){
    getQuote();
  });
  $("#tweet-quote").on("click", function() {
    window.open("twitter.com/intent/tweet?text=" + quote + " -" + author);

  });

});
body {
  background-color: black;
  color: white;
}
#quote-box {
  border: 2px solid white;
  padding: 20px;
  color: white;
  max-width: 500px;
  height: auto;
  margin: auto;
}
button {
  margin: 20px;
  border-radius: 5%;
  border: 2px solid white;
  background-color: black;
  color: white;

}

span {
  width: auto;
  height: auto;
}
<html>
  <head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="qm.css">

    <script src="http://code.jquery.com/jquery-1.9.1.min.js">
    </script>
  <script src="file:///Users/RoseSamuel/Desktop/QuoteMachine/qm.js" type="text/javascript"></script>

  </head>
<body>
  <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
  <h1 class="text-center">Quote Machine</h1>
  <div id="quote-box" class="text-center">
    <span id="text"></span> <br>
    <span id ="author"></span> <br>
    <button id="new-quote" >New Quote</button>
    <button id="tweet-quote">Tweet Quote</button>
  </div>

</body>
</html>

1 Ответ

0 голосов
/ 22 февраля 2019

Может быть, Atom Html Previewer предназначен просто для того, чтобы иметь представление о том, как выглядит Html, и не включает в себя все функции браузера.Отказ в доступе к ресурсам через кросс-источник - это ограничение вашего интернет-браузера.Сервер сообщает вашему браузеру, что ваш скрипт пытается извлечь ресурс из другого домена, и это браузер блокирует доступ.Это ограничение не существует, например, если вы разрабатываете сценарий Powershell или консольное приложение C #, потому что они работают в Windows, тогда как ваш код Javascript использует браузер в качестве платформы и, следовательно, подчиняется его ограничениям.

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

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

...