如何在沒有 jQuery 的情況下使 JS AJAX / FLASK render_template 工作

Question

我正在構建發送的機制：

1. 從 JS AJAX 到 FLASK 的變量 - 成功！
2. 路由到另一個頁面 (/ajax) - 還沒有成功..

我知道實際上有數百個關於這種機制的問題/答案（2），但我什至找不到一個關於從 AJAX 路由 FLASK 而沒有 jQuery 的問題/答案 - 只是純js。 我真的需要幫助或只是建議。 我被困住了。

到目前為止我嘗試了什么：

js

var req = new XMLHttpRequest()
           req.onreadystatechange = function()
           {
               if (req.readyState == 4)
               {
                   if (req.status != 200)
                   {
                    console.log('error AJAX link sends to FLASK')
                    }
                   else
                   {
                      link
                      user_id = document.querySelector('.logo_fi').innerHTML
                    }
                  }
                }
                req.open('POST', '/ajax', true)
                req.setRequestHeader("Content-type", "application/json")
                user_id = document.querySelector('.logo_fi').innerHTML
                var send = {user_id: user_id, link : link};
                req.send(JSON.stringify(send))
                req.open('GET', '/ajax', true)
                return false

py

@app.route('/ajax', methods = ['POST', 'GET'])
def ajax_request():
    if request.method == 'POST':
        print('request received') 
        json_data = request.json
        a = json_data
        a2 = a['link'];
        a1 = a['user_id'];
        start = '<a href="../">'
        end = '<br> LINK.COM</a>'
        a3 = a1[a1.find(start)+len(start):a1.rfind(end)]
        connection = sqlite3.connect("db.db")
        cursor = connection.cursor()
        link_id = a2
        user_id = a3
        params = deleted(id=None, user_id=user_id, link_id=link_id)
        db.session.add(params)
        db.session.commit()
        return render_template("ajax.html")

Answer 1

您可以在req.send(JSON.stringify(send))之后使用window.location.href = "/<url>"路由到另一個頁面。 這將在所述url上向 flask 發送 GET 請求，您可以在其中返回render_template("ajax.html")

Answer 2

第一的

您使用 javascript 從客戶端向服務器發送請求（發布或獲取）。

您可以使用新的 XMLHttpRequest object 或者您也可以使用 jquery / fetch 或任何其他無關緊要的庫。

這一切都在 javascript / 瀏覽器規則下。

第二

服務器收到您的請求並用狀態碼回答。

Flask render_template() 將返回 200 並且不會重定向瀏覽器。

Flask redirect() 將返回 302 並且瀏覽器可能會跟隨。

第三

如果使用 render_template()，則需要使用 windows.location.href。

注意 - 關於重定向循環

您嘗試向“/ajax”發送請求並重定向到“/ajax”。

當響應到達時，您可能應該將用戶重定向到其他 url。

像“/home”這樣的東西。

注意 - 關於一般重定向和 Javascript

客戶端發送 ajax 請求並不意味着瀏覽器會在響應到達后重定向用戶。

在您的情況下，您使用 render_template() 將返回狀態代碼 200。

您可能需要使用將返回狀態代碼 302 或 301 的 redirect()。

如果服務器發送重定向（又名 302 響應加上 Location: 標頭），瀏覽器可能會自動重定向。 但這取決於瀏覽器是否支持重定向。

但無論如何，使用 javascript 重定向可能並不總是有效。

注意 - 一般關於 Javascript

您嘗試在發布請求后發送獲取請求。 如果您的獲取請求取決於您需要使用 promise 或回調的發布請求。 但是在您的情況下，我認為您可以放棄第二個獲取請求。

解決方案1：使用flask redirect()

這是您的問題的一種解決方案。

您需要向服務器發送一個發布請求。

服務器將回答 302。（使用 Flask redirect()）。

瀏覽器可能會遵循重定向。

var req = new XMLHttpRequest();
var user_id = document.querySelector('.logo_fi').innerHTML;
var link = null;
var url = "/ajax";
var send = {user_id: user_id, link : link}

req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/json");
req.send(JSON.stringify(send));

@app.route('/ajax', methods = ['POST'])
def ajax_request():
    if request.method == 'POST':
        json_data = request.json
        a = json_data
        a2 = a['link'];
        a1 = a['user_id'];
        start = '<a href="../">'
        end = '<br> LINK.COM</a>'
        a3 = a1[a1.find(start)+len(start):a1.rfind(end)]
        connection = sqlite3.connect("db.db")
        cursor = connection.cursor()
        link_id = a2
        user_id = a3
        params = deleted(id=None, user_id=user_id, link_id=link_id)
        db.session.add(params)
        db.session.commit()
        return redirect("/home", code=302)

解決方案2：使用flask render_template()

您可以使用 flask render_template()。

您需要向服務器發送一個發布請求。

服務器將回答 200。（使用 Flask render_template()）。

瀏覽器不會跟隨。

您將在客戶端上使用 windows.locarion.href。

您也可以使用 window.location.replace。

replace() 表示它不會在瀏覽器的歷史記錄中創建條目。

var req = new XMLHttpRequest();
var user_id = document.querySelector('.logo_fi').innerHTML;
var link = null;
var url = "/ajax";
var send = {user_id: user_id, link : link}

req.open("POST", url, true);
req.setRequestHeader("Content-type", "application/json");
req.onreadystatechange = function(){
 if(req.readyState == 4){
  if(req.status == 200){
   windows.locarion.href = "/home"
  }
 }
}
req.send(JSON.stringify(send));

@app.route('/ajax', methods = ['POST'])
def ajax_request():
    if request.method == 'POST':
        json_data = request.json
        a = json_data
        a2 = a['link'];
        a1 = a['user_id'];
        start = '<a href="../">'
        end = '<br> LINK.COM</a>'
        a3 = a1[a1.find(start)+len(start):a1.rfind(end)]
        connection = sqlite3.connect("db.db")
        cursor = connection.cursor()
        link_id = a2
        user_id = a3
        params = deleted(id=None, user_id=user_id, link_id=link_id)
        db.session.add(params)
        db.session.commit()
        return render_template("ajax.html")

解決方案3：使用flask jsonify()

你也可以使用 jsonify()

在這種情況下，使用解決方案 2

替換 render_template("ajax.html")

用 jsonify()

一些資源

Flask 渲染模板

https://flask.palletsprojects.com/en/1.1.x/quickstart/#rendering-templates

Flask 重定向

https://flask.palletsprojects.com/en/1.1.x/api/#flask.redirect

Flask jsonify

https://flask.palletsprojects.com/en/1.1.x/api/#flask.json.jsonify

Flask 響應一般

https://flask.palletsprojects.com/en/1.1.x/quickstart/#about-responses