NodeJS实现点击获取数组索引，完成留言板条目删除

我来帮你搞定这个删除功能的问题，其实核心就是把前端的索引值通过请求传递给服务端，然后服务端操作数组和JSON文件就行。下面分步骤给你改代码：

1. 前端修改：把索引嵌入删除表单 #

首先在index.ejs的循环里，我们需要拿到每个条目的索引，然后把它作为隐藏字段放到删除表单里。修改循环部分的代码：

<div class="entrygrid">
  <% for(let i = 0; i < entries.length; i++) { 
    const entry = entries[i];
  %>
  <div class="entry">
    <strong><%= entry.author %></strong>
    <h3><%= entry.title %></h3>
    <p><%= entry.content %></p>
    <p><%= entry.date %></p>
    <form method="POST" action="/guestbook/del">
      <!-- 添加隐藏字段传递索引 -->
      <input type="hidden" name="entryIndex" value="<%= i %>">
      <button class="del" type="submit"></button>
    </form>
  </div>
  <% } %>
</div>

这样用户点击删除按钮提交表单时，就会把对应条目的索引entryIndex一起发送给服务端了，你之前写的那个点击获取索引的代码可以暂时注释掉或者删掉，因为现在不需要通过JS手动拿了（如果想用AJAX异步删除的话后面再讲）。

2. 服务端修改：处理删除请求 #

接下来修改app.js里的/guestbook/del路由，实现删除逻辑：

app.post('/guestbook/del', (req, res) => {
  // 获取前端传来的索引，注意转成数字类型
  const index = parseInt(req.body.entryIndex);
  // 检查索引是否合法（在数组范围内）
  if (index >= 0 && index < entries.length) {
    // 从数组中删除对应索引的条目
    entries.splice(index, 1);
    // 把更新后的数组写入JSON文件
    fs.writeFileSync('./data.json', JSON.stringify(entries));
    // 更新条目数量的文本（和添加功能保持一致）
    text = entries.length < 2 ? 'entry' : 'entries';
  }
  // 重定向回首页，刷新页面展示最新内容
  res.redirect('/index');
});

这里要注意几个点：

• 前端传过来的entryIndex是字符串类型，所以要用parseInt转成数字
• 一定要做索引合法性检查，防止用户传入无效值导致数组操作出错
• 删除后要同步更新text变量，保证页面上的条目数量文本正确

（可选）用AJAX实现异步删除（无刷新） #

如果你不想页面刷新，想用AJAX异步删除的话，可以这么改：

前端index.js修改： #

$(document).ready(function(){
  // 原有的计数逻辑保留
  let text = $('.entrygrid .entry').length < 2 ? "entry" : "entries";
  $('.entrycount span').text($('.entrygrid .entry').length + " " + text);

  // 绑定删除按钮的点击事件，阻止默认表单提交
  $('.del').click(function(e) {
    e.preventDefault();
    // 获取当前条目的索引
    const index = $(this).parent().parent().index();
    // 发送AJAX请求
    $.ajax({
      url: '/guestbook/del',
      method: 'POST',
      data: { entryIndex: index },
      success: function() {
        // 删除成功后，移除页面上对应的条目
        $('.entrygrid .entry').eq(index).remove();
        // 更新计数文本
        const entryCount = $('.entrygrid .entry').length;
        text = entryCount < 2 ? "entry" : "entries";
        $('.entrycount span').text(entryCount + " " + text);
      }
    });
  });
});

服务端app.js修改（适配AJAX）： #

把重定向改成返回成功状态：

app.post('/guestbook/del', (req, res) => {
  const index = parseInt(req.body.entryIndex);
  if (index >= 0 && index < entries.length) {
    entries.splice(index, 1);
    fs.writeFileSync('./data.json', JSON.stringify(entries));
    text = entries.length < 2 ? 'entry' : 'entries';
    // 返回成功状态
    res.sendStatus(200);
  } else {
    // 返回错误状态
    res.sendStatus(400);
  }
});

这样就实现了无刷新删除，用户体验更好~

最后测试 #

现在启动你的Node服务，点击删除按钮，对应的条目就会从页面和JSON文件里消失啦！

内容的提问来源于stack exchange，提问作者fopsie