javascript - Web 应用程序发送表单两次

Question

我的网络应用程序工作正常，直到我按 <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';

Answer 1

尝试像下面这样

$('.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;
    });