为什么我不能将消息从 flask html 发送到 flask python？
why can't I send messages from flask html to flask python?
我一直在用 flask 开发一个程序，它可以让你搜索数据库。我没有在数据库或任何其他地方编码实际发现的东西，但我现在不需要它，数据库现在不影响任何东西。我一直无法解决如何将用户在表单中输入的内容发送到 python 程序的问题。它运行没有错误，但是当我检查收到的内容时，我得到 None。我做错了什么吗？这是我的代码，很乱，只有一个文件。
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)
templates/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>
另外，我正在和一个朋友一起工作，所以我不知道这里有些东西是干什么用的。有人可以告诉我如何发送这些数据吗？我一直在尝试其他问题的东西，但它们不起作用。
提前致谢！
这里有多个问题。正如评论中提到的，我建议慢慢来，把问题分解成小块。检查每个部分是否有效，然后再继续前进并积累许多难以解决的错误。
大部分问题都在前端，因此您需要使用浏览器控制台来检查错误。您还可以使用 HTML validator tool 来确保您的 HTML 有意义并捕捉 land=en.
等拼写错误
因为听起来您想 POST 不刷新页面并且您正在使用 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()。 #hey 和 letsgo 是不明确的名称，不会使调试应用程序变得更容易。
使用 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)
我一直在用 flask 开发一个程序，它可以让你搜索数据库。我没有在数据库或任何其他地方编码实际发现的东西，但我现在不需要它，数据库现在不影响任何东西。我一直无法解决如何将用户在表单中输入的内容发送到 python 程序的问题。它运行没有错误，但是当我检查收到的内容时，我得到 None。我做错了什么吗？这是我的代码，很乱，只有一个文件。
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)
templates/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>
另外，我正在和一个朋友一起工作，所以我不知道这里有些东西是干什么用的。有人可以告诉我如何发送这些数据吗？我一直在尝试其他问题的东西，但它们不起作用。 提前致谢！
这里有多个问题。正如评论中提到的，我建议慢慢来，把问题分解成小块。检查每个部分是否有效，然后再继续前进并积累许多难以解决的错误。
大部分问题都在前端，因此您需要使用浏览器控制台来检查错误。您还可以使用 HTML validator tool 来确保您的 HTML 有意义并捕捉 land=en.
因为听起来您想 POST 不刷新页面并且您正在使用 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()。 #hey 和 letsgo 是不明确的名称，不会使调试应用程序变得更容易。
使用 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)