Question

因此，我只想为正在使用的Flask Web应用程序重新加载div或网页一次，但是由于我不太了解JS，所以我陷入了循环，而不是刷新一次。

为什么我要这样做？

在进入此页面之前，用户输入数据并进行计算，然后通过Selenium，它进行了网站截图，该过程耗时太长，因此当用户单击Enter时，它将进行计算，然后重新定向到新页面该页面我称为一个通过ajax在后台提交的fx硒函数，将加载gif而不是屏幕截图。

目标是ajax路由完成后，div或页面仅重新加载一次以替换gif并显示屏幕截图（我在Jinja中通过if / else进行了此操作）希望如果没有让我知道，这是有道理的。 / p>

这是我要处理的div

<div id="siteimg" class="c">
{% if a.imgofsite != "" %}
  <img class="c" src="{{ url_for('static', filename = '' + a.imgofsite ) }}" style="overflow: hidden;">
{% else %}
  <img class="c" src="{{ url_for('static', filename = 'img/load.gif') }}" style="overflow: hidden;">
  <h5 class="c" style="overflow: hidden;">RENDERING SCREENSHOT</h5>
{% endif %}

下面是我用来提交表单然后调用它的JS。

  <script type="text/javascript">
        function img_load() {
        $.ajax({
            type: 'POST',
            url: '/siteimage/{{ a._id }}',
              });
             }
    </script>
    <script>img_load();</script>

我尝试过的方法：这让我陷入了持续的循环

location.reload(true);

当我将其添加到ajax调用块中时，这没有响应

function refresh() {

setTimeout(function () {
    location.reload()
}, 100);

}

这也让我陷入了一个连续的循环

$("#siteimg").load(location.href + " #siteimg");

Answer 1

有帮助吗？

SetTimeout 将在2秒后重新调用div siteimg专用的ajax。

setTimeout(function() {
  $.get(window.location.href + " #siteimg", function(data) {
    //empty old contents
    $('#siteimg').empty().append($(data).find('#siteimg').children());

    //recall after contents are emptied
    $.ajax({
      type: 'POST',
      url: '/siteimage/{{ a._id }}'
    });
    $('#siteimg').append("<img src='https://www.w3schools.com/w3css/img_lights.jpg'>");
    $('#siteimg').append(
      "<img src='https://www.gettyimages.co.uk/gi-resources/images/CreativeLandingPage/HP_Sept_24_2018/CR3_GettyImages-159018836.jpg'>"
    );

  });
  console.log($("#text").html());
}, 2000);

Answer 2

我想您需要使用接收到的数据来更新div的内容，例如：

<script> 
    function img_load() {
       $.ajax({
         type: 'POST',
         url: '/siteimage/{{ a._id }}',
         success: function(response) {
                       $('#siteimg').append(response);
                  },
         error: function(jqXHR, exception) {
                       console.log('Ajax status: ' + jqXHR.status + ', error: ' exeption);
                }
      });
     }
  </script>

Answer 3

如果您使用浏览器sessionStorage来跟踪第一次访问后页面是否被重新加载怎么办。

在HTML末尾插入以下js：

<script type="text/javascript">
    if (!sessionStorage.getItem('reloaded')) {
        // Page was not reloaded until last visit: do some stuff
        sessionStorage.setItem('reloaded', true); // remeber the following reload for the next time
        setTimeout(function () {
            window.location.reload();
        }, 100);
    }else{
        // Page was reloaded: clear your flag for the next visit
        sessionStorage.removeItem('reloaded');
    }
</script>

如果您选择显示一种模式，告知用户有关重新加载的信息（我认为这是一种很好的做法），则应将setTimeout的值从100增加到2500。

您可以在此处尝试（带有其他控制台输出）：http://fiddle.bplaced.net/53414316/

编辑：

再次阅读问题后，您需要一个ajax请求。重新加载您的网站只是一种解决方法。

尽管我的解决方案应该可以满足您的要求-安德森的答案就是您所需要的。

Answer 4

所以我知道了。首先，我要感谢所有提供答案和编辑以帮助我解决此问题的人。目前，这是我的解决方案。如果出现任何问题，我肯定会添加该信息。

完成此项目后，我肯定会学习一些JS / jQuery和Ajax课程。

 <script>
        var delayInMilliseconds = 60000; // 1 min
    function img_load() {
       $.ajax({
         type: 'POST',
         url: '/siteimage/{{ a._id }}',
       },

          setTimeout(function() {
            $('#siteimg').load(document.URL +  ' #siteimg');
       }, delayInMilliseconds)
       )
     }
     img_load()
  </script>

使用JS或jQuery / Ajax刷新div或页面一次

4 个答案:

编辑：