javascript - 如何在没有 jQuery 的情况下使 JS AJAX / FLASK render

问题描述

我正在构建发送的机制：

从 JS AJAX 到 FLASK 的变量 - 成功！
路由到另一个页面 (/ajax) - 还没有成功..

我知道实际上有数百个关于这种机制的问题/答案（2），但是我什至找不到一个关于从没有 jQuery 的 AJAX 路由 FLASK 的问题 - 只是纯 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

@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")

标签： javascriptpythonajaxflask

第一的

您使用 javascript 从客户端向服务器发送请求（发布或获取）。

您可以使用新的 XMLHttpRequest 对象，也可以使用 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

您尝试在发布请求后发送获取请求。如果您的获取请求取决于您需要使用承诺或回调的发布请求。但是在您的情况下，我认为您可以放弃第二个获取请求。

解决方案 1：使用烧瓶重定向（）

这是您的问题的一种解决方案。

您需要向服务器发送一个发布请求。

服务器将回答 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()

您可以使用烧瓶渲染模板（）。

您需要向服务器发送一个发布请求。

服务器将回答 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")