对于我的类(class)，我正在制作一个简单的网络应用程序，它本质上是一张可以评论的图片。问题是每次我输入新评论时，它都不会显示，而是显示以前的评论。看起来 GET 在 POST 完成更新服务器上的列表之前被调用。但是，也许问题出在其他地方，我不知道。
我做了一些研究，似乎问题是由于异步造成的，但是我从阅读中尝试的所有内容都无法按照我实现的方式工作，包括回调函数。
这是我的代码:
Javascript
var messages = []
function getData() {
fetch('http://localhost:8080/bananas').then(function(response) {
return response.json();
}).then(function(data) {
messages = []
for (i=0; i < Object.keys(data).length; i++) {
messages.push(data[i]);
console.log(data[i]);
}
})
}
function update() {
var box = document.getElementById("messages");
box.innerHTML = "";
getData();
for (i=0; i < messages.length; i++) {
var newDiv = document.createElement("div");
newDiv.className = "comment";
var curM = document.createTextNode(messages[i]);
newDiv.appendChild(curM);
box.appendChild(newDiv);
}
document.getElementById("comment").value = "";
}
update();
var submit = document.getElementById("submit");
submit.onclick = function () {
postData();
update();
}
var clickenter = document.getElementById("comment");
clickenter.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("submit").click();
}
});
function postData() {
var content = document.getElementById("comment").value;
if (content.length > 0) {
message = "message=" + encodeURIComponent(content)
fetch('http://localhost:8080/bananas', {
body: message,
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})
}
}
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="container">
<img src="image.jpg">
<h2> Comments </h2>
<div id="messages">
</div>
<textarea id="comment" type="text"> </textarea>
<input id="submit" type="button" value="Submit">
</div>
<script src="app.js"></script>
</body>
</html>
我的Python服务器:
from http.server import BaseHTTPRequestHandler, HTTPServer
from urllib.parse import parse_qs
import json
comments = []
class MyRequestHandler(BaseHTTPRequestHandler):
def do_GET(self):
if self.path == "/bananas":
self.send_response(200)
self.send_header("Content-type", "application/json")
self.send_header("Access-Control-Allow-Origin", "*")
self.end_headers()
print(comments)
jsonstring = json.dumps(comments)
self.wfile.write(bytes(jsonstring, "utf-8"))
def do_POST(self):
if self.path == "/bananas":
length = self.headers["Content-length"]
length = int(length)
if length > 0:
body = self.rfile.read(length).decode("utf-8")
strMessage = parse_qs(body)['message'][0]
comments.append(strMessage)
self.send_response(201)
self.send_header("Access-Control-Allow-Origin", "*")
self.end_headers()
def main():
try:
listen = ("127.0.0.1", 8080)
server = HTTPServer(listen, MyRequestHandler)
print("Listening...")
server.serve_forever()
except KeyboardInterrupt:
print ("^C entered, stopping web server...")
server.socket.close()
main()
谢谢
最佳答案
这应该是您需要的一切。我没有你的其余代码，所以我无法看到它是否正常运行，但逻辑应该在那里。
var messages = []
var submit = document.getElementById("submit");
var clickenter = document.getElementById("comment");
submit.onclick = function () {
var content = document.getElementById("comment").value;
if (content.length > 0) {
postData()
.then(function() {
return getData();
})
.then(function(msgs) {
update();
});
}
else {
getData()
.then(function(msgs) {
update();
});
}
update();
}
clickenter.addEventListener("keyup", function(event) {
event.preventDefault();
if (event.keyCode === 13) {
document.getElementById("submit").click();
}
});
update();
function getData() {
return fetch('http://localhost:8080/bananas')
.then(function(response) {
return response.json();
})
.then(function(data) {
messages = []
for (i=0; i < Object.keys(data).length; i++) {
messages.push(data[i]);
console.log(data[i]);
}
return messages;
});
}
function update() {
var box = document.getElementById("messages");
box.innerHTML = "";
for (i=0; i < messages.length; i++) {
var newDiv = document.createElement("div");
newDiv.className = "comment";
var curM = document.createTextNode(messages[i]);
newDiv.appendChild(curM);
box.appendChild(newDiv);
}
document.getElementById("comment").value = "";
}
function postData() {
return fetch('http://localhost:8080/bananas', {
body: "message=" + encodeURIComponent(content),
method: 'POST',
header: {
'Content-Type': 'application/x-www-form-urlencoded'
}
});
}关于javascript - 我的 JavaScript Post 和 Get 函数与 python 服务器发生故障，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48820483/