Я не понимаю, что означает этот маленький блок кода - PullRequest
0 голосов
/ 15 июня 2019

поэтому после прочтения дюжины учебных пособий и постов я понял, что '/ todo /' + item - это URL-адрес, на который этот код отправляет запрос, но полный URL-адрес https://MyHomePageURL + '/ todo /' + пункт? но когда я ввел этот http URL, страница была недействительной. Я в основном вводил любые возможные URL-адреса http до и после каждого сделанного мной запроса, и только "http://127.0.0.1:5000/todo", который является главной страницей, работал, и никакой другой URL не работал. (Например, когда значение элемента является стулом, это -> 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>

Ответы [ 2 ]

0 голосов
/ 15 июня 2019

Когда вы набираете URL в адресной строке браузера и нажимаете ввод, браузер отправляет на сервер запрос GET.Если вы проверите код своего сервера (второй предоставленный вами файл), этот URL /todo/:item принимает только запрос DELETE.Вот почему вы получаете неверную страницу, когда вы получаете доступ к этому URL из браузера.Но в URL /todo определены методы GET и POST.Вот почему вы получили GET ответ, определенный на сервере, когда вы нажали этот URL из браузера.

0 голосов
/ 15 июня 2019

Это сбивает с толку, но, как я понимаю, вы хотите понять код, вот мои мысли, ajax делает HTTP-запрос DELETE над ресурсом (то есть todo /: item)

$.ajax({
        type: 'DELETE',

, который на сервереПолучается следующий код:

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

Если вы запустите это в почтальоне (не в браузере) с соответствующей настройкой, вы сможете увидеть, как она работает.Надеюсь, это поможет.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...