Проблема с исчезновением HTML-страниц с использованием JQuery и Ajax - PullRequest
Новая
       43

Проблема с исчезновением HTML-страниц с использованием JQuery и Ajax

0 голосов
/ 02 ноября 2018

Как новичок в программировании, начинающий учиться в колледже, я пытаюсь выполнить свое первое задание, заключающееся в кодировании веб-сайта на глюк, используя CSS, HTML и JS (и мы должны загружать данные, используя $.getJSON()).

Проблема, с которой я столкнулся с самого начала, заключалась в том, что я пытался создать плавный переход с плавным переходом между первой загружаемой HTML-страницей, на которой есть одна кнопка, которая должна вести на вторую, и второй HTML-страницей. , Я пытался следовать этому уроку:

https://www.superhi.com/video/simple-page-transitions-with-jquery-and-javascript (замена "section" на "body"), но для загрузки второй страницы мне нужно обновить страницу, она не может сделать это сама по себе (даже если эффект постепенного появления / исчезновения) кажется, работает) и, несмотря на то, что URL-адрес действительно измениться ... может кто-нибудь сказать мне, где я запутался?

Вот тело моей первой html-страницы 

<body>
<div class="content">
<h1><a href="index2.html" id="index2go">Welcome to Greendale</a></h1>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"> 
</script>
<script src="main.js"></script>
</body>

и вот страница JS 

$("#index2go").on("click", function(event){
event.preventDefault()
const href = $(this).attr("href")
window.history.pushState(null, null, href)
$.ajax({
url: href,
success : function(data){ 
$("body").fadeOut(300, function(){ 
const newPage = $(data).filter("body").html()
$("body").html(newPage)
$("body").fadeIn(250)
})
}
})
})

Большое спасибо!

1 Ответ

0 голосов
/ 03 ноября 2018

Я не уверен в масштабах вашего проекта, поэтому это может быть за его пределами. С FadeIn и FadeOut вы можете выполнить функцию в конце ее перехода. С AJAX это не совсем то же самое. Это немного сложно, но это означает, что даже когда AJAX обрабатывает запрос, дальнейший код может выполняться до того, как данные будут возвращены. Так что лучше всего обернуть весь код.

Вот предлагаемый пример: 

$(function() {
  function getContent(u, target, fn) {
    var newPage;
    console.log("GET " + u);
    var req = $.ajax({
      url: u,
      cache: false,
      dataType: "html",
      success: function(data) {
        console.log("SUCCESS ", data);
        newPage = $(data).find("body").childern();
        target.html(newPage);
        fn();
      },
      error: function(xhr, stat, error) {
        console.log("ERROR ", xhr, stat, error);
        newPage = $("<div>", {
          class: "error"
        }).html("Error " + stat + ": " + error);
        target.html(newPage);
        fn();
      }
    });
  }
  $("a").on("click", function(event) {
    event.preventDefault();
    var href = $(this).attr("href");
    window.history.pushState(null, null, href);
    $("body").fadeOut(300, function() {
      $("body").html("");
      getContent(href, $("body"), function() {
        $("body").fadeIn(250);
      });
    });
  });
});
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<div class="content">
  <h1><a href="index2.html" id="index2go">Welcome to Greendale</a></h1>
</div>
...