Javascript 在通过Jade生成的HTML页面中单击按钮执行服务器端代码(node.js)
我正在尝试开发一个web应用程序,我被困在一个点上,需要在单击按钮时执行一些服务器端代码(通过onClick事件处理程序而不是提交按钮。我学会了如何通过表单操作来路由流量)。我正在使用Node.js、Express和Jade。 谁能帮帮我吗。这是我当前的代码快照 我对app.js做了以下更改,将点击流量路由到此node.js函数Javascript 在通过Jade生成的HTML页面中单击按钮执行服务器端代码(node.js),javascript,jquery,node.js,express,pug,Javascript,Jquery,Node.js,Express,Pug,我正在尝试开发一个web应用程序,我被困在一个点上,需要在单击按钮时执行一些服务器端代码(通过onClick事件处理程序而不是提交按钮。我学会了如何通过表单操作来路由流量)。我正在使用Node.js、Express和Jade。 谁能帮帮我吗。这是我当前的代码快照 我对app.js做了以下更改,将点击流量路由到此node.js函数 app.post('/overview/delete-uni', uniappController.deleteUniversity); 在相应的控制器文件中,我添加
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
注:我是一个彻头彻尾的noob w.r.t Jade,因此如果这是一件小事,请原谅我 创建一个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();
})
});