Fatal编程技术网
  • javascript/
  • Javascript 尝试写入时发生POST 404（未找到）错误http://localhost:3000/messages

Javascript 尝试写入时发生POST 404（未找到）错误http://localhost:3000/messages

javascript jquery node.js

Javascript 尝试写入时发生POST 404（未找到）错误http://localhost:3000/messages,javascript,jquery,node.js,Javascript,Jquery,Node.js,我正在尝试通过node js构建一个具有客户机-服务器交互的基本网站。 我有一个近乎自相矛盾的问题，一方面，转到http://localhost:3000/messages将显示所需的数据 我知道该代码还有其他潜在问题。一旦我通过了404错误，我将开始处理它们 [{“姓名”：“吉姆”，“留言”：“你好”}，{“姓名”：“约翰尼”，“留言”：“你好”}] 但是当试图通过 $.post（'http://localhost:3000/messages，消息） 虽然包含来自两个输入字段的数据的消息（我

我正在尝试通过node js构建一个具有客户机-服务器交互的基本网站。 我有一个近乎自相矛盾的问题，一方面，转到
http://localhost:3000/messages
将显示所需的数据

我知道该代码还有其他潜在问题。一旦我通过了404错误，我将开始处理它们

[{“姓名”：“吉姆”，“留言”：“你好”}，{“姓名”：“约翰尼”，“留言”：“你好”}]

但是当试图通过

$.post（'http://localhost:3000/messages，消息）

虽然包含来自两个输入字段的数据的消息（我只能在客户端通过这些字段添加数据），但使用适当的事件侦听器按下按钮会在控制台中产生以下错误 
POSThttp://localhost:3000/messages 404（未找到）jquery-3.5.1.min.js:2

（jquery部分位于控制台框架的最右侧）

最奇怪的是，在dev窗口的network选项卡中，有两个http://localhost:3000/messages 出现，而第二个标记为错误

这是完整的代码，因为我不确定在我的情况下还有什么是重要的

HTML，CSS&JS，文件名-index.HTML

<!doctype html>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>


<div class="container">
    <br>
    <div class="jumbotron">
        <h1 class="display-4">Send Message</h1>
        <input class="form-control" placeholder="name" id="name">
        <input class="form-control" placeholder="message" id="message">
        <button id="send" class="btn btn-success">Send</button>
    </div>
    <div id="messages"></div>
</div>
<script>

    $('#send').click(()=>{
        var messages = {
            name: $('#name').val(),
            message: $('#message').val()
        }
        hostMessage(messages)});
    $(document).ready(()=>{
        displayMessages();
        console.log("The page has finished loading");
    })
    function addMessage(message){
        $('#messages').append(`<h1>${message.name}</h1><h4>${message.message}`);
    }
    function displayMessages(){
        $.get('http://localhost:3000/messages', (data)=>{
            data.forEach(element=> {
                addMessage(element)
            }, this);
            
        })
    }
    function hostMessage(messages){
        $.post('http://localhost:3000/messages', messages) 

    }
</script>
抱歉，如果有点乱，我对这整件事还是很陌生。

你能把
/
添加到
app.post（'messages'…
，比如
'/messages'
改成app.post（'/messages'，（req，res）=>{messages.push（req.body）console.log（req.body）res.sendStatus（200）}）还是同样的错误sadly它现在可以工作了吗？你是说有css定制吗？我导入了一些预定义的类（针对各种元素的设计），不确定这是否是你的意思，但是（哦，我看到那条评论被删除了）你能将
/
添加到
app.post（'messages'…
，比如
'/messages'
将其更改为app.post吗（'/messages'，（req，res）=>{messages.push（req.body）console.log（req.body）res.sendStatus（200）}）仍然是相同的错误sadly它现在可以工作了吗？你的意思是css定制吗？我从中导入了一些预定义的类（针对各种元素的设计），但不确定这是否是你的意思（哦，我看到那个注释被删除了） 
var bodyParser = require('body-parser');
var path = require('path');
var fs = require('fs');
var app = express();

app.use(express.static(__dirname));
app.use(bodyParser.json());
var messages = [
    {name: "Jim", message: "heyo"},
    {name: "Johny", message: "Yo"}
]

app.get('/messages', (req, res)=>{
    res.send((messages))
})
app.post('messages', (req, res)=>{
    messages.push(req.body)
    console.log(req.body)
    res.sendStatus(200)
})
var server = app.listen(3000,()=> {
    console.log('Server is listening through port ', server.address().port);
});