node.js & jade - 发出 post 请求并在同一页面中显示结果而不重定向

Question

我有 node.js 快速 Web 应用程序，它在单击按钮时执行 CRUD 操作。在这里，我需要根据用户的输入更新一条记录。为此，我需要输入用户的详细信息，在同一页面中显示记录的现有值，并提示用户是否要更改数据。

如果是，那么我需要输入用户的值并更新它。是否可以将它放在一个 jade 文件中，我从用户那里获取输入值。

玉文件：

extends ../layout

block content
  .page-header
    h3 Updation

  form.form-horizontal(role='form', method='POST')
    h4 Enter the employee id for which you want to update the details
    input(type='hidden', name='_csrf', value=_csrf)

    .form-group
      label(class='col-sm-2 control-label', for='empid') Emp ID
      .col-sm-2
        input.form-control(type='text', name='empid', id='empid', autofocus=true)
     .form-group
      .col-sm-offset-2.col-sm-2
        button.btn.btn-primary(type='submit')
          i.fa.fa-pencil
          | Get details

我有这个文件，我从用户那里获取员工 ID 并发出 post 请求。我不确定如何呈现对同一页面本身的响应并提示更改详细信息。

如有任何帮助，我们将不胜感激。

Answer 1

是的，您可以这样做，但不能使用提交的表单，因为那样您的页面就会消失。

相反，您可以在页面中插入一个向后端发出 AJAX 请求的按钮，并且在 AJAX 请求的 return 上，您可以动态替换某些部分您页面的 returned 数据。当然，您可以在 AJAX 请求中包含用户输入的任何数据。

由于您希望这一切都发生在前端，因此您不能在 Jade 中执行此操作。相反，您需要在您的页面中添加一个脚本，以在客户端的浏览器中执行您想要的操作。

下面是一个如何实现这个的例子：

将其放入名为 ajax.jade:

的文件中

mixin ajaxFunction
  script.
    function changeState(url, buttonid) {
      $.ajax({url: url}).done(function (data) {
        $('#' + buttonid).parent().html(data);
      });
    }

mixin ajaxButton(id, url, buttonLabel)
  a.btn.btn-primary.btn-xs.btn-block(id='#{id}',
        href='javascript:changeState(\'#{url}\', \'#{id}\')') #{buttonLabel}

现在您可以将此 mixin 放在页面的任何位置。（确保按钮 ID 在整个页面中是唯一的，并且不包含空格！）。单击时，它将自己替换为任何后端 returned:

include ajax

+ajaxButton("myButton", "/some/url", "Klick me!")

Answer 2

不确定 jade 引擎是否可以部分渲染 jade 模板，如果有一种方法，通常可以使用 Ajax 来实现。表单添加提交事件监听器，其中可以设置event.preventDefaut() 停止默认提交过程，这样可以防止页面重新加载。

node.js & jade - 发出 post 请求并在同一页面中显示结果而不重定向

node.js & jade - making a post request and displaying the results in the same page without redirecting

javascript

node.js

pug