Javascript 能否检测到 POST 操作已经完成?

问题描述 投票:0回答:1

我正在开发一个Chrome扩展,目的是让用户对我们大学的Drupal CMS的页面之间的导航有更多的控制。我希望能够影响的事情之一是,在进行了保存操作之后,页面的导航位置。保存操作是由 <form> 使用POST方法的元素,其 action 属性设置为与本页面相同的URL。但是,根据现在的页面是哪种类型,保存操作(点击 "保存 "按钮)的时候,会出现 "保存 "的情况。<input type="submit"> 元素)将导致导航到另一个页面,或使该页面保持在同一位置。我希望用户能够在保存后通过选择一个选项来选择导航到哪个页面。<select> 元素,我在扩展中添加了这个元素。这将导致一个chrome.storage对象来存储所需的目标URL,然后在一个 window.addEventListener("beforeunload") 函数,于是一个 window.location.href = <desired URL>被执行。为了显示保存的内容,页面也必须重新加载。

对我来说,仅从客户端工作的问题是要知道什么时候引导到选定的位置。如果太早发生,保存操作就不会完成。如果发生得太晚,默认页面就有时间被加载,时间就会流失。我已经设法使其临时工作,通过插入一个 setTimeout() 函数,但超时间隔当然是任意的,可能会根据很多情况而失败。有没有办法在js脚本中检测到POST操作已经完成,现在可以安全地加载一个新的页面?

现在的代码。

HTML

<select class="my-selector">
  <option value="URL1">page 1</option>
  <option value="URL2">page 2</option>
  <!--etc -->
</select>

JS

 $(".my-selector").change(function(){
      var url = $(this).val();
      chrome.storage.sync.set({redirect:true,url:url})
      $(this).closest("form").submit();
 });

    //=============

    window.addEventListener("beforeunload", function() {
       chrome.storage.sync.get(function(message){
          if(message.redirect){
            chrome.storage.sync.set({redirect:false,reload:true});
            setTimeout(function(){ //this I want to avoid
              window.location.href = message.url;
            },3000);  
          }
        })
      });

    //=============

$(document).ready(function(){
      chrome.storage.sync.get(function(message){
          if(message.reload){
            chrome.storage.sync.set({reload:false});
            location.reload();
          }
      });
     //etc
 });
javascript jquery google-chrome-extension drupal
1个回答
0
投票

这个答案并没有提供一个检测POST操作是否完成的方法--而是使用AJAX劫持了post操作。但它完成了我心中的任务,即把表单数据的发送和下一页的导航分开。 基于来自 wOxxOm'的评论,我已经得到了下面的程序,使用 表格数据API 和jQuery $.post() 操作。我不知道这是否是最理想的--是否有更直接的方法来创建这个 formObj 对象?欢迎提供任何建议。

HTML

<select class="my-selector">
  <option value="URL1">page 1</option>
  <option value="URL2">page 2</option>
  <!--etc -->
</select>

JS

$(".my-selector").change(function(){
   var link = $(this).val();
   var myForm = $(this).closest("form").get(0);//select the form
   var url = $(myForm).attr("action");
   var formData = new FormData(myForm);//use FormData API to extract the data to send
   var formObj = {};
   for(var pair of formData.entries()){
      formObj[pair[0]] = pair[1];//create the object to send the data with
   }
   $.post(url,formObj,function(){ //send the data without submitting the form
      window.location.href = link; //redirect to desired location
   });
 });
© www.soinside.com 2019 - 2024. All rights reserved.