我使用 python 服务器的 JavaScript Post 和 Get 函数出现故障答案

【问题标题】：My JavaScript Post and Get functions with python server are out of order我使用 python 服务器的 JavaScript Post 和 Get 函数出现故障
【发布时间】：2018-07-26 23:47:51
【问题描述】：

对于我的班级，我正在制作一个简单的网络应用程序，它本质上是一张可以评论的图片。问题是每次我输入新评论时，它都不会显示，而是显示以前的评论。似乎 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()

谢谢

【问题讨论】：

发生这种情况是因为您同时执行 GET 和 POST 请求。给我几分钟，我会为你重写你的代码，得到一个更有意义的答案。

标签： javascript python post server get

【解决方案1】：

这应该是您需要的一切。我没有你的任何其他代码，所以我看不出它是否运行正常，但逻辑应该在那里。

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'
    }
  });
}

【讨论】：

感谢您的回答。但是，当我运行它时，我收到错误 "app.js:42 Uncaught TypeError: Cannot read property 'then' of undefined" 并且第 42 行指的是 postData() 调用之后的 .then(function() { 行
您将不得不发布有关其余代码的更多详细信息。 fetch() 函数您使用哪个库？
而且我认为我没有使用任何库，只是 javascript 附带的任何东西，抱歉，这是我第一次使用服务器。
刚刚修好了，在你原来的代码中，你忘了在 postData 函数中定义内容
@byurocks23 => 明白了。很高兴你弄明白了。 :)