Question

我有一个index.php页面和一个info.php页面。 index.php将info.php的内容加载到div中。

Index.php文件：

<html>
<head>
    <script type="text/javascript" src="includes/jquery-3.2.1.min.js"></script>
</head>
<body>
    <div id="data"></div>
    <script>
    function loadDoc(){
    $( "#data" ).load( "info.php", function() {
      //console.log( "Load done." );
    });

    };
    $(function(){loadDoc();});
    setInterval (loadDoc, 5000 );
    </script>
</body>
</html>

info.php的：

<html>
<head>
<style>
.box
{
  border:1px solid #101010;
  padding:20px;
}

#back
{
  display:none;
}
</style>
<script>
$("#openBack").click(function(){
    $("#front").hide();
    $("#back").show();
});

$("#openFront").click(function(){
    $("#back").hide();
    $("#front").show();
});
</script>
</head>
<body>
    <div id="front" class="box">
      front // <a href="#" id="openBack">open back</a>
    </div>
    <div id="back" class="box">
      back // <a href="#" id="openFront">open front</a>
    </div>
</body>
</html>

问题：当我打开div时，它会在几秒后关闭，因为AJAX调用会替换内容。我怎样才能防止这种情况发生？我想过做一些切换，但我不明白如何实现它或是否能解决问题。

Answer 1

动态注入页面的任何内容（不是iframe情况）都不应该包含外部HTML / HEAD / BODY包装器，因为它可能无法正确处理...

每5秒钟，界面将重新加载并清除所有现有内容，并将其替换为新内容。任何州都不会被保留。不确定这是不是你的意思;如果没有，请提供更多意见，我可以进一步提供帮助。

Answer 2

使用deferred.promise（）

var dfd = jQuery.Deferred();
//pass defferred object in click or your function
$("#openBack").click(function(dfd){
  $("#front").hide();
  //suppose this is your ajax call
  setInterval(function(){
     //if success then resolve with ajax return data
     dfd.resolve("ajax data");
     // if failed then reject
     dfd.reject("if any data need pass");
     //based on hide and show
     $("#back").show();
  }, 3000);

}）;

See the documentation of promise jquery

在AJAX通话后保持div打开？

2 个答案: