删除后烧瓶返回重定向不起作用

时间:2020-03-07 22:23:41

标签: javascript python flask sqlalchemy

帮助,我是FLask和Python的新手。我不确定为什么,但是返回重定向不起作用。当我单击按钮时,该项目将被删除,但不会重定向或闪烁消息。如果之后单击“主页”,则将闪烁成功消息。

@app.route('/stuff/<thing_id>', methods=['DELETE'])
def delete_thing(thing_id):
  error = False
  thing = thing.query.filter(thing.id == thing_id).one_or_none()
  if thing is None:
    return render_template('errors/404.html')
  try:
    db.session.delete(thing)
    db.session.commit()
  except:
    error = True
    flash('An error occurred. thing ' + thing.name + ' could not be deleted.')
    db.session.rollback()
    print(sys.exc_info())
  finally:
    db.session.close()
  if not error:
    flash('thing ' + thing.name + ' was successfully deleted!')
  return redirect(url_for('index'))

在我的模板中,我有:

<button id="delete-thing" data-id="{{ thing.id }}" class="btn btn-default btn-sm">
    Delete Thing
</button>

<script>
    const deleteBtn = document.getElementById('delete-thing')
    deleteBtn.onclick = function(e) {
        let result = confirm("Are you sure? This will permanently delete this thing!");
        if (result) {
            const thingId = e.target.dataset['id']
            fetch('/stuff/' + thingId, {
                method: 'DELETE'
            })
        }
    }
</script>

感谢您的帮助!

1 个答案:

答案 0 :(得分:1)

此javascript抓取功能执行所谓的ajax调用。这意味着它将调用服务器并获取结果,然后按照您的指示执行操作。而且您什么也没说,因此它对返回的值不做任何事情。这就是为什么单击按钮时什么也没有发生的原因。

但是您的服务器代码设置了闪现消息,当您实际从服务器加载任何页面时,它将在下一次显示。

该如何解决?好吧,这在很大程度上取决于您预期的工作流程。我本人考虑使用ajax调用高级主题。 Ajax调用更适合SPA(单页应用程序)。我建议您采用传统方式,将旧的html表单与POST方法配合使用。一旦熟悉了这一点,您就可以取得进步。无论如何,这比python / flask / sqlalchemy更像是一个JavaScript问题,因为这一部分对您来说是正确的。

无论如何,要让您看到正在发生的事情,可以尝试执行以下操作:

        fetch('/stuff/' + thingId, {
            method: 'DELETE'
        }).then(function(response) {
            if (!response.ok) {
                console.log("Error", response);
            } else {
                console.log("Success", response);
                // this is kind-of silly, but should help you achieve what you want
                // location.reload()
            }
        })

并启动Web浏览器的控制台以查看调试打印。 参见:https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch