Question

我使用Python和Flask创建了一个单页面应用程序。该页面有一个＆＃34; next＆＃34;按钮。当用户点击＆＃34; next＆＃34;按钮我想使用我通过GET请求发送的数据（＆＃39; id2＆＃39;）重新加载页面。

这是我的问题：当我执行GET请求时，我可以看到我的Python控制器函数正在接收AJAX数据。但是，HTML页面似乎没有使用正确的数据刷新（在下面的示例中，＆＃34; bar＆＃34;未传递到HTML页面。）

我相信没有新页面发送到我的浏览器。我下面的终端窗口中的输出仅显示GET请求。此外，当我查看Chrome开发工具中的网络流量时，点击“下一步”后，按钮，我只看到一个新的获取请求，并且没有新的页面发送到浏览器。

有人可以帮助我了解如何创建GET（或POST）请求，以触发服务器提供包含GET请求数据的新HTML页面吗？

谢谢！

我的Python控制器：

@app.route('/', methods=["GET", "POST"])
def home_page():
    print 'new page requested'
    data = request.args.get('id2');
    if data != None:
        return render_template("index.html", article="foo")
    else: 
        return render_template("index.html", article="bar")

我的HTML / Javascript代码：

<!DOCTYPE html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>

<body>
    <p>{{ article }}</p>
    <button class="next" id="next">Next</button>

      <script>
        $("#next").click(function() {
            $.ajax({
              type: "GET",
              url: '/',
              data: {id2: "{{ article }}"}
            });
        });
      </script>
</body>

终端数据：

new page requested
127.0.0.1 - - [17/Apr/2015 00:01:16] "GET /?id2=foo HTTP/1.1" 200 -

Answer 1

如果您想使用AJAX将整个DOM替换为从Flask应用程序输出的模板，您只需执行以下操作：

var nextArticle == 'foo';

$("#next").click(function() {
    $.get("/?id2=" + foo, function(data) {
        document.open('text/html');
        document.write(data);
        document.close();
        // recreate binding for your $("#next") button
    }
}

Python-Flask AJAX GET数据不会显示在HTML页面上

1 个答案: