Question

我正在尝试开发一个Web应用程序而且我遇到了一个点，我需要一些服务器端代码才能在点击按钮时执行（通过onClick事件处理程序而不是Submit按钮。我学会了如何路由通过表单操作的流量）。我正在使用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：我是翡翠的完整菜鸟，所以请原谅我，如果这是微不足道的话。

Answer 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();
    })  
});

在通过Jade生成的HTML页面中单击按钮时执行服务器端代码（node.js）

1 个答案: