У меня есть небольшое приложение, написанное на Javascript, которое представляет собой список дел.Интерфейс представляет собой простой Javascript, который берет данные из массива, а затем позволяет пользователю добавлять элементы в массив (публиковать данные).Когда они нажимают на элемент, он должен быть удален:
Теперь он вроде работает.Поэтому, когда пользователь вводит элемент и нажимает клавишу ввода или нажимает кнопку «Отправить», он дважды отображает элемент?!
Когда пользователь щелкает элемент, чтобы удалить его, он удаляется только при обновлении страницы (F5).Метод location.reload () не запускается, или успех не регистрируется
Вот интерфейс, показывающий дублирование:
Вот 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, указав запись в теге формы в качестве метода
Спасибо