Node.js NodeJS-ajaxpost404（未找到）

我试图在单击显示的项目时将值从一个文件发送到另一个文件。 在执行此操作时，我得到一个错误：

POST http://localhost:4000/todo/addToCart 404 (Not Found)    jquery-3.3.1.js:9600 

我的app.js文件：

//More codes above to set-up express and all
app.use(express.static('./public'));
todoController(app); //give todocontroller the reference to express
app.listen(4000); //listen on a port
console.log('server is running');

控制器：

module.exports = function(app) {
  app.get('/todo', function(req, resp) {
    Todo.find({}, function(err, data) {
      if (err) throw err;
      console.log('get method');
      resp.render('todo', {
        todos: data
      });
    });
  });
  //Few More Code
  app.post('/todo', urlencodedParser, function(req, resp) {
    console.log('post method');
    resp.render('addToCart', {
      data: req.body
    });
  });
};

$('li').on('click', function() { //when user clicks on an item in the list
  var item = $(this).text().replace(/ /g, "-"); //traps the item user clicked on
  alert(item);
  $.ajax({
    type: 'POST',
    url: '/todo/addToCart', //+item append that item to the url
    success: function(item) {
      location.reload(); //refresh the page
    }
  });
});

<div id="todo-table">
  <form id="todoForm" method="post" action="/todo">
    <input type="text" name="item" placeholder="Add new Item..." required />
    <button type="submit">Add Item</button>
    <ul>
      <% for (var i=0;i<todos.length; i++){ %>
      <li>
        <%=todos[i].item%>
      </li>
      <% } %>
    </ul>
  </form>
</div>

数据交互模型：

module.exports = function(app) {
  app.get('/todo', function(req, resp) {
    Todo.find({}, function(err, data) {
      if (err) throw err;
      console.log('get method');
      resp.render('todo', {
        todos: data
      });
    });
  });
  //Few More Code
  app.post('/todo', urlencodedParser, function(req, resp) {
    console.log('post method');
    resp.render('addToCart', {
      data: req.body
    });
  });
};

$('li').on('click', function() { //when user clicks on an item in the list
  var item = $(this).text().replace(/ /g, "-"); //traps the item user clicked on
  alert(item);
  $.ajax({
    type: 'POST',
    url: '/todo/addToCart', //+item append that item to the url
    success: function(item) {
      location.reload(); //refresh the page
    }
  });
});

<div id="todo-table">
  <form id="todoForm" method="post" action="/todo">
    <input type="text" name="item" placeholder="Add new Item..." required />
    <button type="submit">Add Item</button>
    <ul>
      <% for (var i=0;i<todos.length; i++){ %>
      <li>
        <%=todos[i].item%>
      </li>
      <% } %>
    </ul>
  </form>
</div>

父ejs:

module.exports = function(app) {
  app.get('/todo', function(req, resp) {
    Todo.find({}, function(err, data) {
      if (err) throw err;
      console.log('get method');
      resp.render('todo', {
        todos: data
      });
    });
  });
  //Few More Code
  app.post('/todo', urlencodedParser, function(req, resp) {
    console.log('post method');
    resp.render('addToCart', {
      data: req.body
    });
  });
};

$('li').on('click', function() { //when user clicks on an item in the list
  var item = $(this).text().replace(/ /g, "-"); //traps the item user clicked on
  alert(item);
  $.ajax({
    type: 'POST',
    url: '/todo/addToCart', //+item append that item to the url
    success: function(item) {
      location.reload(); //refresh the page
    }
  });
});

<div id="todo-table">
  <form id="todoForm" method="post" action="/todo">
    <input type="text" name="item" placeholder="Add new Item..." required />
    <button type="submit">Add Item</button>
    <ul>
      <% for (var i=0;i<todos.length; i++){ %>
      <li>
        <%=todos[i].item%>
      </li>
      <% } %>
    </ul>
  </form>
</div>

添加项

您在nodejs服务器上创建的路由如下：

app.post('/todo', urlencodedParser, function (req, resp) {
  console.log('post method');
  resp.render('addToCart', { data: req.body });
});

匹配对
/todo
端点发出的所有POST请求，而不是不存在的
/todo/addToCart
。这就是您获得404的原因

您的ajax请求应该是这样的：

$('li').on('click', function () {
  var item = $(this).text().replace(/ /g, "-");
  alert(item);
  $.ajax({
    type: 'POST',
    url: '/todo', // 'addToCart' has been removed from the path
    success: function (item) {
      location.reload();
    }
  });
});