Question

因此，在阅读了十二篇教程和帖子后，我发现'/ todo /'+ item是此代码将请求发送到的URL，但是整个URL https://MyHomePageURL +'/ todo /'+项目？但是当我输入该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>

Answer 1

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

$.ajax({
        type: 'DELETE',

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

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

如果您在邮递员中（而不是在浏览器中）使用适当的设置来运行此程序，则可以看到它的正常运行。希望对您有所帮助。

Answer 2

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

我不明白这小段代码的含义

2 个答案: