个人中心
gpt4 book ai didi

javascript - 向 Flask render_template 端点发出客户端 POST 请求

转载 作者：太空宇宙 更新时间：2023-11-03 20:40:18 24 4
gpt4 key购买 nike

经过长时间的搜索，我找不到我需要的东西。这是我的问题的一个经过提炼的最小可验证示例。

为了设置问题的背景，这里是我打算实现的实际用例。端点 /heatmap 上有一个热图，用户可以单击单元格，他们应该被重定向到不同的端点 /more-info-on-cell。根据单击的单元格，用户将得到不同的结果。我几乎得到了预期的结果。唯一的问题是页面没有真正正确呈现，因为 /more-info-on-cell 的 javascript 由于某种原因没有被执行。

以下是此示例所需的文件夹结构:

root
|-templates
|  -index.html
|  -page.html
|-index.py

这是文件:index.html

  <!DOCTYPE html>
  <html>
  <head> 
  <title>Title of the document</title> 
  </head>

  <body>
      <a id="clickMe" style="cursor: pointer">Click here to send POST to render template on the backend</a>
  </body>

  <script 
    src="https://code.jquery.com/jquery-3.4.1.min.js" 
    integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" 
    crossorigin="anonymous"></script>
  <script>
      $(document).ready(function() {
          $("#clickMe").on('click', function() {
              console.log('clicked, making a request')

              $.ajax({
                  type: 'POST',
                  url: '/',
                  data: JSON.stringify({}),
                  contentType: 'application/json',
                  success: function(response) { window.document.write(response);  }
              })
          })
      })
  </script>

  </html>

page.html

 <!DOCTYPE html>
 <html>
 <head>
 <title>Title of the document</title>
 </head>

 <body>
 The content of the document......
 </body>

 <script
   src="https://code.jquery.com/jquery-3.4.1.min.js"
   integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
   crossorigin="anonymous"></script>
     <script>
         $(document).ready(function() {
             alert('the doc is ready');
         })
     </script>

 </html>

index.py

 #!/usr/bin/env python3
 from flask import Flask, request, render_template, jsonify
 app = Flask(__name__)

 @app.route("/", methods=["GET", "POST"])
 def index():
     if request.method == "GET":
         return render_template('index.html')
     elif request.method == "POST":
         return render_template('page.html')

您可以验证，如果单击 index.html 中的链接，您会成功重定向到 page.html，但其 javascript 从未执行。因此，您永远不会收到我们在 page.html 中定义的警报。

这个问题应该通过完全使用 Flask 后端来解决，因为我的实际用例中的模板也有 jinja 变量。如果您通过 form 发出请求，且方法具有正确的 url 且操作为 POST，那么一切都会完美运行。虽然，一旦我开始发出 javascript 客户端 POST 请求，它就可以工作，因为我到达了正确的页面，但它呈现不正确+文档就绪上的 javascript 永远不会被执行。

最佳答案

对于也有此类用例的任何人，请确保使用如下方法 post (在本例中将其放在 index.html 中):

  <script>
      $(document).ready(function() {
          $("#clickMe").on('click', function() {
              console.log('clicked, making a request')

             post('/', {'key-1': 'val-1'});
          })
      })

 function post(path, params, method='post') {
     const form = document.createElement('form');
     form.method = method;
     form.action = path;

     for (const key in params) {
         if (params.hasOwnProperty(key)) {
             const hiddenField = document.createElement('input');
             hiddenField.type = 'hidden';
             hiddenField.name = key;
             hiddenField.value = params[key];

             form.appendChild(hiddenField);
         }
     }

     document.body.appendChild(form);
     form.submit();
 }
  </script>

这会在网页上创建一个隐藏表单，然后提交该表单，从此之后，flask 会正确处理所有内容。

关于javascript - 向 Flask render_template 端点发出客户端 POST 请求，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/56901179/

24 4 0
文章推荐： c# - 为什么这个 JQuery 无效？
文章推荐： css - 自定义复选框在 Windows 上的 Chrome 中不起作用
文章推荐： c# - RadGrid - 导出到 CSV 不包括模板列
文章推荐： javascript - 悬停时更改边距但保持元素静止
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com