Question

我想使用ajax加载一个带Bootstrap模式的页面。场景就像，

点击按钮时，
该按钮将调用ajax来获取数据，
从烧瓶中，它将从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>

并且烧瓶部件将返回

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

但即使从一开始就会产生404错误。请帮忙。

Answer 1

你可以写：$('id_body_modal').html(html); $('id_modal').modal('show');

烧瓶ajax莫代尔

1 个答案: