Javascript 烧瓶ajax模式_Javascript_Ajax_Flask_Bootstrap Modal

Javascript 烧瓶ajax模式

javascript ajax flask

Javascript 烧瓶ajax模式,javascript,ajax,flask,bootstrap-modal,Javascript,Ajax,Flask,Bootstrap Modal,我想使用ajax加载带有引导模式的页面。情景是这样的单击按钮时该按钮将调用ajax来获取数据从flask中，它将从DB中获取相关数据，并以JSON格式返回数据在ajax成功部分，它将动态生成模式页面并显示出来我找不到一个好的例子，甚至返回html页面都会出错我的示例代码运行在 <html> <head> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/c

我想使用ajax加载带有引导模式的页面。情景是这样的

单击按钮时

该按钮将调用ajax来获取数据

从flask中，它将从DB中获取相关数据，并以JSON格式返回数据

在ajax成功部分，它将动态生成模式页面并显示出来

我找不到一个好的例子，甚至返回html页面都会出错

我的示例代码运行在

<html>
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="../static/css/jquery.modal.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="../static/js/jquery.modal.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// Open modal in AJAX callback
$('#manual-ajax').click(function(event) {
  event.preventDefault();
  $.get(this.href, function(html) {
    $(html).appendTo('body').modal();
  });
});
</script>
</head>
<main>
<a href="/ajax2" id="manual-ajax">second example</a>
</main>
</html>

但它从一开始就产生了404错误。请帮助。

您可以编写：

$（'id\u body\u modal'）.html（html）；
$（'id_modal'）.modal（'show'）；

我的建议是将其分解为不同的组件并调试每一部分：1）通过XHR从Flask请求HTML 2）引导模式。一些很好的模态例子。目前这两件事都是错误的。404表示您的链接正在请求一个不存在的资源。您应该在Flask中HTML模板的任何链接中使用

url\u for（）

，以避免这种情况发生。您还需要在模板中添加一个实际的模式，bootstrap不只是将HTML注入到您的页面中来创建一个模式。。。请参阅示例。@PJSantoro首先感谢您的评论。模态似乎不一定是通过隐藏特性实现的。如果您看这个例子，“”，它会动态加载一个外部html页面作为模态。这是我想做的事情。我的电影列表中有很多电影，当我单击每个项目时，会弹出一个模式。我认为在我的情况下，动态加载每个项目会更有效。。。有什么想法吗？谢谢。@PJSantoro这也是将外部html文件调用到模式中的另一个示例。谢谢您的评论，但我想将外部html文件加载到模式中。不是这样的。。

@app.route('/ajax2')
def ajax2():
  return app.send_static_file(url_for('static', filename='../templates/ajax2.html'))