等待提交表单以重定向用户后等待页面重新加载完成

Question

您可能已经知道提交表单后页面会重新加载，就我而言，用户在文本框中输入YouTube链接并提交。然后，我将链接中的YouTube视频转换成mp3文件（所有这些事情都发生在Django视图中）。我需要做的是将用户重定向到他/她可以收听音频的另一个页面。表单提交后页面重新加载以某种方式与转换同步（这对我来说是很好的）。因此，转换完成后，页面将停止重新加载。因此，我需要检查用户提交表单后页面是否已完全加载。我在下面尝试了这种方法，但实际上没有用。

我的JavaScript代码

let button = document.getElementById('main-btn');

button.addEventListener('submit', function() {
        // After form is submitted check if page is fully loaded 
        document.onreadystatechange = () => {
                if(document.readyState === 'complete'){
                        window.location = 'player';
                }
        }
});

HTML表单

<form id='form-id' method='POST'>{% csrf_token %}
     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...' id='url_box'/> <br>
     <button class='submit-btn' id='main-btn' type='submit'>Convert</button>
</form>

[如果有人能提供好的方法，我将非常感激，因为我需要尽快完成此项目。预先感谢！

Answer 1

您可以在提交时传递查询字符串，并检查查询字符串是否未定义并且加载的页面已完成然后重定向。

您可以在document.onreadystatechange上添加事件监听器，并检查document.readyState状态。

尝试一下。

let button = document.getElementById('main-btn');
button.addEventListener('submit', function (evnet) {
  // After form is submitted check if page is fully loaded 
  evnet.preventDefault();
  document.onreadystatechange = () => {
    const urlParams = new URLSearchParams(window.location.search);
    const isSubmitted = urlParams.get('isSubmitted');
    if (document.readyState === 'complete' && isSubmitted) {
      window.location = 'player';
    }
  };
  evnet.submit();
});

HTML：

<form id='form-id' action="pageName?isSubmitted=true" method='POST'>{% csrf_token %}
     <input class='url_box' type='url' name='url_value' placeholder='Paste the URL...' id='url_box'/> <br>
     <button class='submit-btn' id='main-btn' type='submit'>Convert</button>
</form>