Python-Flask AJAX GET數據未顯示在HTML頁面上

Question

我已經使用Python和Flask創建了一個單頁應用程序。 該頁面具有“下一步”按鈕。 當用戶單擊“下一步”按鈕時，我想使用隨GET請求發送的數據（'id2'）重新加載頁面。

這是我的問題：執行GET請求時，我可以看到我的Python控制器函數正在接收AJAX數據。 但是，HTML頁面似乎沒有使用正確的數據刷新（在下面的示例中，“ bar”沒有傳遞到HTML頁面。）

我相信沒有新頁面發送到我的瀏覽器。 我下面的終端窗口中的輸出僅顯示GET請求。 另外，當我在Chrome Dev工具中查看網絡流量時，單擊“下一步”按鈕后，我只會看到一個新的獲取請求，並且沒有新頁面發送到瀏覽器。

有人可以幫我理解如何創建一個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用Flask應用程序輸出的模板替換整個DOM，則只需執行以下操作：

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 個解決方案

解決方案1
0 2015-04-17 07:35:43

Python-Flask AJAX GET數據未顯示在HTML頁面上

問題描述

1 個解決方案

解決方案1 0 2015-04-17 07:35:43

解決方案1
0 2015-04-17 07:35:43