在通过 Jade 生成的 HTML 页面中单击按钮执行服务器端代码 (node.js)答案

【问题标题】：Executing server side code (node.js) on click of a button from within an HTML page generated through Jade在通过 Jade 生成的 HTML 页面中单击按钮执行服务器端代码 (node.js)
【发布时间】：2016-03-03 07:38:43
【问题描述】：

我正在尝试开发一个 Web 应用程序，但我被困在需要在单击按钮时执行一些服务器端代码的点（通过 onClick 事件处理程序而不是提交按钮。我学会了如何路由通过表单操作以这种方式进行流量）。我正在使用 Node.js、Express 和 Jade。有人可以帮帮我吗。这是我当前的代码快照

我对 app.js 进行了以下更改，以将点击流量路由到此 node.js 函数

app.post('/overview/delete-uni', uniappController.deleteUniversity);

在相应的控制器文件中，我添加了删除代码

exports.deleteUniversity = function(req, res) {
  // Code logic
  // More code logic
  res.render('uniapp/university', {
  title: 'University'
  });

};

我的翡翠模板看起来像这样。在这里，当我单击 Update 按钮时，我需要执行 deleteUniversity 代码

extends ../layout

block content

  .mdl-layout.mdl-js-layout.mdl-color--grey-100
      main.mdl-layout__content
        .mdl-grid
          #user
          for application in user.applications
            form.form-card.form-horizontal(action='/overview/update-uni', method='POST')
              input(type='hidden', name='_csrf', value=_csrf)
              .mdl-card.mdl-shadow--2dp                    
                .mdl-card__supporting-text
                  textarea#sample5.mdl-textfield__input(type='text', rows='1', name='universityName', readonly)
                    if application.university.name
                      | #{application.university.name}
                  .mdl-textfield.mdl-js-textfield.mdl-textfield--floating-label
                    textarea#sample5.mdl-textfield__input(type='text', rows='1', name='universityDescription')
                      if application.university.description
                        | #{application.university.description}
                    label.mdl-textfield__label(for='sample5') Description of university...
                .mdl-card__actions.mdl-card--border
                  button.mdl-button.mdl-button--colored.mdl-js-button.mdl-js-ripple-effect(type='submit')
                    | Update
                .mdl-card__menu
                  button.mdl-button.mdl-button--icon.mdl-js-button.mdl-js-ripple-effect
                    i.material-icons delete

P.S : 我是一个完全的菜鸟 w.r.t Jade，因此如果这是微不足道的事情，请原谅我。

【问题讨论】：

标签： javascript jquery node.js express pug

【解决方案1】：

创建一个javascript文件deleteUni.js（或任何你想调用的文件）并将它添加到你的模板脚本中（src="/Scripts/deleteUni.js"）

//content of name.js
$(function(){

    var isButtonDisabled = false;
    $('#buttonId').click(function($event){

        //this part handles multiple button clicks by the user, trust me on this one, it's really important to have it
        if (isButtonDisabled){
            return $event.preventDefault();
        }
        isButtonDisabled = true;

        var formData = $('#formId').serialize(); //serialize form to a variable

        $.post( "/overview/delete-uni",formData)
         .success(function(response){
            //handle response

         })
         .fail(function(error){
            //handle error
         })
         .always(function(){
            //always execute
            .
            .
            .
            isButtonDisabled = false;
         });

        return $event.preventDefault();
    })  
});

【讨论】：