javascript - Web 应用程序发送表单两次
问题描述
我的网络应用程序工作正常,直到我<button id="button" class="btn btn-primary btn-lg" onclick="sendForm()" value="GENERA XML">GENERA XML</button>
按下它时,网络应用程序崩溃,我检查了调试器,似乎该函数post
被调用了两次,第一次函数完美运行,第二次运行它我的应用程序崩溃。
这是表格:
<form class="container broadcast-form" action="/form" enctype="multipart/form-data" method="post">
这是我的客户端 js:
function sendForm() {
const Form = document.querySelector('.broadcast-form')
let formSend = new FormData();
const cliente = Form.querySelector('#clienti').options[clienti.selectedIndex].text
formSend.append('cliente', cliente);
$.ajax({
url: '/form',
method: "POST",
dataType: 'json',
data: formSend,
processData: false,
contentType: false,
success: function(result){
console.log(result);
},
error: function(er){
console.log(er);
}
});
}
这是我的服务器端:
app.post('/form', (req, res) => {
con.query(('SELECT * FROM Tab_Clienti WHERE Cliente = "' + cliente +'"'), (err, QCliente, fields) =>{
if (err) console.log(err)
else{...}
})
})
出于显而易见的原因,我只用必要的部分减少了代码。
如何让应用程序只发送一次表格?
这是缺少的部分:
const cliente = Form.querySelector('#clienti').options[clienti.selectedIndex].text
const emittente = Form.querySelector('#emittenti').options[emittenti.selectedIndex].text
const inputFile = Form.querySelector('#path').value.replace(/.*[\/\\]/, '')
const dataT = Form.querySelector('#date').value
const oraTrasmissione = Form.querySelector('#timeTransmission').value
const sottotitolo = Form.querySelector('#sottotitolo').value
const titoloTrasmissione = Form.querySelector('#titoloTrasmissione').value
const presentatore = Form.querySelector('#presentatore').value
const sommario = Form.querySelector('#sommario').value
const keyword = Form.querySelector('#keyword').value
const currentDate = new Date().toLocaleDateString()
const currentTime = new Date().toLocaleTimeString();
const durataTrasmissione = Math.floor(Form.querySelector('#preview').duration);
const fileVideo = Form.querySelector('#preview').src
formSend.append('cliente', cliente);
formSend.append("inputFile",Form.querySelector('#path').value.replace(/.*[\/\\]/, ''));
formSend.append('emittente', emittente);
formSend.append('sottotitolo',sottotitolo);
formSend.append('dataT', dataT);
formSend.append('currentDate', currentDate);
formSend.append('currentTime', currentTime);
formSend.append('oraTrasmissione', oraTrasmissione);
formSend.append('durataTrasmissione', durataTrasmissione);
formSend.append('titoloTrasmissione', titoloTrasmissione);
formSend.append('presentatore', presentatore);
formSend.append('sommario', sommario);
formSend.append('keyword', keyword);
formSend.append('fileVideo', Form.querySelector('#preview').src);
和服务器端:
app.post('/form', upload.single('fileVideo'),(req, res) => {
var date = new Date(),
blockid = (date.toJSON().replace(/[\-T:.Z]/g, ''));
cliente = req.body.cliente
inputFile = req.body.inputFile
dataT = req.body.dataT
currentDate = req.body.currentDate
currentTime = req.body.currentTime
oraTrasmissione = req.body.oraTrasmissione
durataTrasmissione = req.body.durataTrasmissione
emittente = req.body.emittente
sottotitolo = req.body.sottotitolo
titoloTrasmissione = req.body.titoloTrasmissione
presentatore = req.body.presentatore
sommario = req.body.sommario
keyword = req.body.keyword
fileVideo = req.body.fileVideo
blockdate = JSON.stringify(date.getFullYear()) + "-" + JSON.stringify(date.getMonth()+1) + "-" + JSON.stringify(date.getDate()) + " " + JSON.stringify(date.getHours()) + ":" + JSON.stringify(date.getMinutes()) + ":" + JSON.stringify(date.getSeconds())
con.query(('INSERT INTO movedb.Tab_Invii (Data_Invio, Orario_Invio, Nome_File_Inviato, Cliente, Emittente, Orario_trasmissione, Durata_trasmissione, Nome_trasmissione, Titolo_Trasmissione, Presentatore, Keyword) VALUES ("' + currentDate + '","' + currentTime + '","' + inputFile + '","' + cliente + '","' + emittente + '","' + oraTrasmissione + '","' + durataTrasmissione + '","'+ sottotitolo + '","' + titoloTrasmissione + '","' + presentatore + '","' + keyword +'");'), (err, req, res)=>{
if (err) console.log(err)
else{
con.query(('SELECT * FROM Tab_Clienti WHERE Cliente = "' + cliente +'"'), (err, QCliente, fields) =>{
if (err) console.log(err)
else{
con.query(('SELECT * FROM Tab_Emittenti WHERE Emittente = "' + emittente +'"'), (err, QEmittente, fields) =>{
if (QEmittente[0].Media == 'TV') var mediaEmittente = 'T';
if (QEmittente[0].Media == 'Radio') var mediaEmittente = 'R';
if (QEmittente[0].Media == 'W') var mediaEmittente = 'W';
解决方案
尝试如下
$('.broadcast-form').unbind('submit').submit();
或者
('.broadcast-form').submit(function(e){
e.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr( 'action' ),
data: $(this).serialize(),
success: function( response ) {
}
});
return false;
});
推荐阅读
- javascript - 如何更改 webRTC 流的视频源 ID?
- sql - 奇怪的用逗号连接
- android - 使用 React Native 应用程序在哪里存储用于身份验证的用户密码
- java - Liquibase-向名称中包含指定后缀的所有表添加一列
- java - 在自定义数组列表中调用字符串数组
- java - Servlet 多次初始化
- python - 我收到一个错误“没有名为‘app.config’的模块;‘app’不是一个包”
- java - 当我从 Android Studio 中的选项卡式活动启动片段时,屏幕变黑
- google-drive-api - Google Drive API 显示错误的 storageQuota
- ssl - 为特定端口续订证书