【发布时间】：2018-10-16 04:41:21
【问题描述】：
我有一个用 Javascript 编写的小应用程序，它是一个待办事项列表。前端是简单的 Javascript，它从数组中获取数据，然后允许用户向数组中添加项目（发布数据）。当他们点击一个项目时，它应该被删除
现在，它有点起作用了。所以当用户输入一个项目并按下回车或点击提交时，它会列出两次该项目？！
当用户单击要删除的项目时，它仅在页面刷新时删除 (F5)。 location.reload() 方法似乎没有触发，或者没有成功注册
这是前端，显示重复：
这里是控制post和delete的js（todo_list.js）：
//These are ajax requests
//in the controller post method we will be using this code
$(document).ready(function(){
//when click submit
$('form').on('submit', function(){
//create item
let item = $('form input');
//create todo with value from item above
//add to data array in the controller
let todo = {item: item.val()};
//send post request to post in controller
$.ajax({
type: 'POST',
url: '/todo',
//pass todo as data
data: todo,
success: function(data){
//do something with the data via front-end framework
//reload page when new item is added
location.reload();
}
});
return false;
});
$('li').on('click', function(){
//replace spaces with hyphens
var item = $(this).text().replace(/ /g, '-');
$.ajax({
type: 'DELETE',
url: '/todo/' + item,
success: function(data){
location.reload();
}
});
});
});
这是网页的 ejs 文件 (todo.ejs)：
<html>
<head>
<title>To-do list</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- below works because of the middleware setting for static files -->
<script src="/assets/todo_list.js"></script>
<link href="/assets/styles_example_app.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>My todo list</h1>
<div id="todo-table">
<form method="POST">
<input type = "text" name="item" placeholder="Add new item..." required />
<button type = "submit">Add items</button>
</form>
<ul>
<% for(let i = 0; i < todos.length; i++){ %>
<li><%= todos[i].item %></li>
<% } %>
</ul>
</div>
</body>
<script src="/assets/todo_list.js"></script>
</html>
在上面，需要for循环来显示数组（数据）中的现有项，这里是控制器：
const bodyParser = require('body-parser');
//storing some data to display on the webpage. This is the array we're working with
let data = [{item: 'get milk'}, {item: 'walk dog'}, {item: 'kick Joey'}];
let urlencodedParser = bodyParser.urlencoded({extended: false});
module.exports = function(app){
//now we're exporting and calling in app.js, we can make the routes
app.get('/todo', function(req, res){
//render a get request when user visit /todo in browser
//pass the data from the above data object onto the page
res.render('todo', {todos: data});
});
//handler for post request for when user enters to do list item todo_list.js
app.post('/todo', urlencodedParser, function(req, res){
//grab data from array and push user input data to array
//added new item to data array
data.push(req.body);
//once added, render page
res.redirect('/todo');
});
//handler for deleting the files
app.delete('/todo/:item', function(req,res){
//filter out item that we're trying to delete
data = data.filter(function(todo){
// bottom is returning true or false
// if false, remove from array
return todo.item.replace(/ /g, '-') !== req.params.item;
res.redirect('/todo');
})
});
}
我很困惑的是如何复制输入的帖子数据，以及为什么单击删除的项目时不会重新加载页面。如果我手动重新加载，它们会被删除。我觉得我错过了一些小东西，因为它很有效，虽然很糟糕
有人有什么建议吗？
到目前为止，我已经尝试将 jquery 调用更改为 google（我在这里找到了一个建议），也在 EJS 文件中将表单标签中的 post 指定为方法
谢谢
【问题讨论】：
-
对不起，如果这看起来有点业余，这是我的第一个项目，所以 cmets 将让我记住它在做什么以及它是如何联系在一起的
-
您确定调用了“DELETE”成功回调吗？您是否尝试在此处放置断点，或者至少在控制台日志中放置？
-
我刚刚尝试添加一个 console.log -> "success: function(data){ location.reload(); console.log('it deleted');"它不会登录到控制台，但是当我重新加载页面时，网页中点击的项目消失了
-
尝试在 DELETE 中添加错误回调，并在其中执行 console.log(arguments)，这样我们就可以查看它是否失败以及原因。此外，网络选项卡，检查“保留日志”并查看“删除”api 是否返回了 200，我对此表示怀疑。我认为这就是原因。
-
location.reload();将刷新页面，因此您在此之后添加的任何内容都无关紧要（您可能短暂地看到控制台日志，但值得怀疑） .
标签： javascript jquery node.js ajax ejs