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

【问题标题】：node.js & jade - making a post request and displaying the results in the same page without redirectingnode.js &jade - 发出 post 请求并在同一页面中显示结果而无需重定向
【发布时间】：2016-03-29 15:54:40
【问题描述】：

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

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

玉文件：

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 并发出发布请求。我不确定如何呈现对同一页面本身的响应并提示更改详细信息。

任何帮助将不胜感激。

【问题讨论】：

标签： javascript node.js pug

【解决方案1】：

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

相反，您可以在页面中插入一个向后端发出 AJAX 请求的按钮，当 AJAX 请求返回时，您可以用返回的数据动态替换页面的某些部分。当然，您可以在 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 在整个页面中是唯一的，并且不包含空格！）。点击后，它将用后端返回的任何内容替换自己：

include ajax

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

【讨论】：

我会尝试你提到的方式。同时，如果您有相同的示例代码，您可以发布吗？
谢谢妮可。很抱歉迟到了。我一定会看看这个:)

【解决方案2】：

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

【讨论】：