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

I am trying to develop a web application and I am stuck at a point where I need some server side code to be executed on click of a button (through the onClick event handler and not the Submit button. I learnt how to route traffic that way through a form action). I am using Node.js, Express and Jade. Can someone please help me. Here is my current code snapshot

我正在尝试开发一个Web应用程序,我陷入了一个点,我需要一些服务器端代码才能通过点击按钮执行(通过onClick事件处理程序而不是Submit按钮。我学会了如何以这种方式路由流量通过形式行动)。我正在使用Node.js,Express和Jade。有人可以帮帮我吗。这是我当前的代码快照

I have made the following changes with respect to app.js to route the on-click traffic to this node.js function

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

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

Within the appropriate controller file I have added the deletion code

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

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

};

My Jade Template looks like this. Here when I click the Update button I need the deleteUniversity code to be executed

我的玉模板看起来像这样。在这里,当我单击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 : I am a complete noob w.r.t Jade and hence please forgive me if this is something trivial.

P.S:我是翡翠的完整菜鸟,所以请原谅我,如果这是微不足道的话。

1 个解决方案

#1

Create a javascript file deleteUni.js (or whatever you want to call it) and add this to your template script(src="/Scripts/deleteUni.js")

创建一个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();
    })  
});