xmlHttpRequest() 发送后，Flask 页面未在浏览器中刷新

Question

我正在使用事件侦听器来拦截表单提交，等待确认，然后使用 xmlHttpRequest 提交表单。我的页面的 POST 似乎正在工作（这意味着我可以检测到我期望的所有表单字段）但是，在 Flask 视图处理程序代码的末尾，重定向不会导致浏览器刷新页面。在视图处理程序中，我尝试使用 return redirect('/pagename') 重定向页面

我的事件侦听器处理程序代码中的积极结果是：

  // The positive action was chosen
  .then(() => {
    url = event.submitter.formAction
    submit_element = event.submitter;
    len = event.srcElement.length
    const formData = new FormData();
  
    for (i = 0; i < len; i++) {
      formData.append(event.srcElement[i].name, event.srcElement[i].value )
    }
    
    const request = new XMLHttpRequest();
    request.open("POST", url, true);
    request.send(formData);

  })

在我的烧瓶应用程序中，我还有：

@app.after_request
def after_request(response):
    """Ensure responses aren't cached"""
    response.headers["Cache-Control"] = "no-cache, no-store, must-revalidate"
    response.headers["Expires"] = 0
    response.headers["Pragma"] = "no-cache"
    response.headers['Cache-Control'] = 'public, max-age=0'
    return response

如果我不使用事件侦听器拦截表单提交，那么表单提交和页面重定向将按预期工作。

我还需要在我的 xmlHttpRequest.send() 调用中包含其他内容以完全模拟表单提交吗？任何关于这里可能发生的事情的想法都非常感谢。

Answer 1

使用 JavaScript fetch() 而不是 XMLHttpRequest() 为我解决了我的问题。 fetch() 函数发布数据，我可以使用 .then() 子句重定向到 fetch() 之后的位置。

我能够使用如下代码发布表单提交中的所有字段，并被我的事件侦听器拦截；然后强制重新加载提交表单的页面。

              .
              .
// get url of submitting page
url = event.submitter.formAction;

// work out how many fields we have
len = event.srcElement.length;

// add each field to a formData object
const formData = new FormData();
for (i = 0; i < len; i++) {
  formData.append(event.srcElement[i].name, event.srcElement[i].value );
}

// post the data
response = fetch(url,
{
    body: formData,
    method: "post"
});    

response.then(response => {
  console.log(response);
  // reload the page
  document.location = response.url;

              .
              .