我不明白这个小代码块是什么意思

所以在阅读了十几个教程和帖子后，我认为'/todo/'+item是这段代码发送请求的URL，但整个URL是 https://MyHomePageURL+'/todo/'+item吗？但是当我输入该HTTP URL时，该页面无效。我基本上在每次请求之前和之后输入了任何可能的http URL，只有"http://127.0.0.1:5000/todo"是主页，没有其他URL工作。(例如，当 item 的值为 chair 时，这个 -> http://127.0.0.1:5000/todo/chair 应该有效，但它不起作用(。还有什么理由必须将此 Ajax 请求专门发送到该特定 https://URL？

我专门谈论的代码来自文件"todo-list.js">

$(document).ready(function(){
$('form').on('submit', function(){
  var item = $('form input');
  var todo = {item: item.val()};
  $.ajax({
    type: 'POST',
    url: '/todo',
    data: todo,
    success: function(data){
      location.reload();
    }
  });
  return false;
});
$('li').on('click', function(){
  var item = $(this).text().replace(/ /g, "-");
  $.ajax({
    type: 'DELETE',
    url: '/todo/' + item,
    success: function(data){
      location.reload();
    }
  });
});
});

对于更广泛的上下文，这里是名为"todoController.js的代码文件。

var bodyParser = require('body-parser');
var data = [{item: 'chair'}, {item: 'flower'}, {item: 'bed'}];
var urlencodedParser = bodyParser.urlencoded({extended: false});
module.exports = function(app) {
app.get('/todo', function(req, res){
    res.render('todo', {todos: data});
});
app.post('/todo', urlencodedParser, function(req, res){
    data.push(req.body);
    res.json(data);
});

app.delete('/todo/:item', function(req, res){
    data = data.filter(function(todo){
        return todo.item.replace(/ /g, '-') !== req.params.item;
    });
    res.json(data);
});
};

这是启动名为"index.js"的应用程序的主代码。

var express = require('express');
var app = express();
var todoController = require('./todoController');
app.set('view engine', 'ejs');
app.use(express.static('./'));
todoController(app);

app.listen(5000, '127.0.0.1');

另一个代码文件运行此应用程序，名为"todo.ejs">

<html>
   <head>
    <title>Todo List</title>
    <script
    src="https://code.jquery.com/jquery-3.4.1.min.js"
    integrity="sha256- 
    CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
    crossorigin="anonymous"></script>
    <script src="assets/todo-list.js"></script>
    <link href="assets/styles.css" rel="stylesheet" 
     type="text/css">
  </head>
  <body>
    <h1>My Todo List</h1>
    <div id="todo-table">
      <form>
        <input type="text" name="item" placeholder="Add new 
         item..." required />
        <button type="submit">Add Item</button>
      </form>
      <ul>
              <% for(var i=0; i < todos.length; i++){ %>
                <li><%= todos[i].item %></li>
              <% } %>
      </ul>
    </div>
  </body>

</html>

当您在浏览器地址栏中键入 URL 并按回车键时，浏览器将向服务器发出GET请求。如果您检查服务器代码(您提供的第二个文件(，该 URL /todo/:item只接受DELETE请求。这就是为什么当您从浏览器访问该URL时收到无效页面的原因。但是 URL /todo定义了GET方法和POST方法。这就是为什么当您从浏览器点击该 URL 时GET服务器中定义的响应。

这很令人困惑，但据我所知，您想了解这里的代码是我的想法，ajax 正在对资源(即 todo/：item(发出 HTTP DELETE 请求

$.ajax({
        type: 'DELETE',

在服务器上通过以下代码接收

app.delete('/todo/:item', function(req, res){

如果您使用适当的设置在邮递员(而不是在浏览器中(运行它，您将能够看到它正在工作。希望对您有所帮助。

相关内容

最新更新

热门标签：