【问题标题】:why can't I send messages from flask html to flask python?为什么我不能从烧瓶 html 向烧瓶 python 发送消息?
【发布时间】:2022-01-08 06:46:58
【问题描述】:

我一直在开发一个烧瓶中的程序,该程序允许您搜索数据库。我没有对数据库中的实际查找内容或任何内容进行编码,但我现在不需要,并且数据库现在不会影响任何内容。我一直无法理解如何将用户在表单中输入的内容传递给 python 程序。它运行没有错误,但是当我检查收到的内容时,我得到了无。有什么我做错了吗?这是我的代码,很乱,只有一个文件。

main.py

from flask import Flask, render_template
from flask import request
import pdfkit, time




def go(letters):
  data = open('data.txt','r')
  return letters
  
   
app = Flask(__name__)
       
@app.route("/path/", methods=['GET','POST'])
def search():
  time.sleep(1)
  data=request.get_data()
  print(data)
  return go(data)

@app.route('/')
def index():
  
  return render_template('index.html')

if __name__ == "__main__":
    from waitress import serve
    serve(app, host="0.0.0.0", port=8080)
    app.run(debug=True)

模板/index.html

<!Doctype html!>

<html land=en>
<h1>Welcome!</h1><br>
<p>Type to search the database.</p>
<br><form name='this' onsubmit='letsgo()' class='text' action='/path/' method='post'><input id='hey' type='text'> <input type='submit' value='search'></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
var test = document.getElementById('hey').value;
  const xhr = new XMLHttpRequest();
function letsgo() { 
  
  const data = document.getElementById("hey").value
  alert(data)
$.ajax({
  type : 'POST',
  url : "{{'https://file-encrypter.ashwinchera.repl.co/path/'}}",
  dataType: 'data',
  datas : {'data':data}
});
            

};      
</script>

我也在和一个朋友一起工作,所以我不知道这些东西是用来做什么的。有人可以告诉我如何发送这些数据吗?我一直在尝试其他问题,但它们不起作用。 提前谢谢!

【问题讨论】:

  • 当前代码到底有什么问题?您是否遇到错误,或者“不工作”究竟意味着什么?
  • @ggorlen,我没有收到错误,但是当我检查什么是字母时,(我收到的)我没有。
  • 您在不使用render_template 的情况下将字符串视为模板。这不会很好地结束——如果你打开 JS 控制台,你应该会看到错误。 JS 中的alert(url_for(view./path/)) 不使用 Jinja 模板注入 curlies,因此尝试在浏览器中将 Python 代码作为 JS 运行肯定会出错。
  • 另外,你确定jQuery已经导入到前端了吗?如果是这样,请显示在哪里。 const xhr = new XMLHttpRequest(); 被创建并且从未使用过,所以代码闻起来就像是在没有太多理解或处理的情况下拼凑在一起的,如果你能原谅我的坦率。
  • 我对烧瓶很新,(我两天前开始使用),每次我尝试 render_template 时都会出现错误jinja2.exceptions.TemplateNotFound: index.html,之前有很多错误。而另一种方式有效,所以我一直在使用它。

标签: javascript python html flask messaging


【解决方案1】:

这里有多个问题。正如 cmets 中提到的,我建议慢慢地工作并将问题分解成小块。检查每件作品是否有效,然后再匆匆忙忙积累许多难以解决的错误。

大部分问题都在前端,因此您需要使用浏览器控制台来检查错误。您还可以使用 HTML validator tool 来确保您的 HTML 有意义并捕捉到诸如 land=en 之类的拼写错误。

因为听起来您想在不刷新页面的情况下发布并且您使用的是 jQuery,所以表单上的许多属性都是不必要的:

onsubmit='letsgo()' action='/path/' method='post'

都可以删除。当您使用它时,请删除任何未使用的噪音,例如:

var test = document.getElementById('hey').value;
  const xhr = new XMLHttpRequest();

以及不必要的 ID 和类。这些只是增加了混乱。当事情没有意义并且无法正常工作时,请尝试删除代码而不是添加代码。

"{{'https://file-encrypter.ashwinchera.repl.co/path/'}}" 应该只是/path,这样它就可以在任何域上工作,例如本地主机。如果你在跨域工作,那就是另一回事了,但我认为你不是。

$.ajax 调用中,datas 是一个错字。那应该是data

const data = document.getElementById("hey").value 不是必需的。如果你介意导入 jQuery,不妨一直使用它:$("#hey").val()#heyletsgo 是不明确的名称,不会使应用程序的调试变得更加容易。

使用event.preventDefault() 阻止表单提交。

在后端,再次删除文件读取和import pdfkit, time 等任何杂物和噪音。将GET 添加到/path 路由的接受动词列表中似乎很奇怪(这太笼统地命名了,go 也是如此)。

由于您使用的是表单数据,request.get_data() 可以是 request.form.get("data"),其中 "data" 是您要从已解析的表单中检索的键。

这是一个让您动起来的最小 AJAX 示例:

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
  <h1>Welcome!</h1>
  <p>Type to search the database.</p>
  <form>
    <input id="search-term">
    <input type="submit" value="search">
  </form>
  <div id="result"></div>

<script>
$("form").submit(function (event) {
  event.preventDefault();
  var data = $("#search-term").val();
  $.ajax({
    type: "POST",
    url: "search",
    data: {data},
    success: data => $("#result").text(data),
    error: res => console.error(res),
  });
});      
</script>
</body>
</html>

app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/search", methods=["POST"])
def search():
    data = request.form.get("data")
    print(data)
    return data

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

如果你想提交和渲染一个新页面,你不需要jQuery:

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>Welcome!</h1>
  <p>Type to search the database.</p>
  <form action="/" method="post">
    <input name="search-term">
    <input type="submit" value="search">
  </form>
  <div>{{search_term}}</div>
</body>
</html>

app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/", methods=["GET", "POST"])
def index():
    search_term = request.form.get("search-term", "")
    return render_template("index.html", search_term=search_term) 

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

或者指向另一个页面:

templates/index.html:

<!DOCTYPE html>
<html lang="en">
<body>
  <h1>Welcome!</h1>
  <p>Type to search the database.</p>
  <form action="/search" method="post">
    <input name="search-term">
    <input type="submit" value="search">
  </form>
</body>
</html>

templates/search.html:

<!DOCTYPE html>
<html lang="en">
<body>
  <p>You searched: '{{search_term}}'</p>
</body>
</html>

app.py:

from flask import Flask, render_template, request

app = Flask(__name__)

@app.route("/search", methods=["POST"])
def search():
    search_term = request.form.get("search-term", "")
    return render_template("search.html", search_term=search_term) 

@app.route("/")
def index():
    return render_template("index.html")

if __name__ == "__main__":
    app.run(host="127.0.0.1", port=8080, debug=True)

【讨论】:

  • 谢谢!效果很好!
猜你喜欢
  • 1970-01-01
  • 2014-07-23
  • 1970-01-01
  • 2013-04-03
  • 2017-11-09
  • 2017-07-13
  • 1970-01-01
  • 2019-05-13
  • 2017-10-15
相关资源
最近更新 更多