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并发出帖子请求。我不知道如何呈现对同一页面本身的响应并提示更改细节。

任何帮助都将不胜感激。

Answer 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}

现在，您可以将此混音放在页面的任何位置。（确保按钮ID在整个页面中是唯一的，并且不包含空格！）。点击后，它将用后端返回的内容替换自己：

include ajax

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

Answer 2

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

node.js＆amp; jade - 发布帖子请求并在同一页面中显示结果而不重定向

2 个答案: