Question

我的网络应用程序正常工作，直到我按下<button id="button" class="btn btn-primary btn-lg" onclick="sendForm()" value="GENERA XML">GENERA XML</button> 当我按它，Web应用程序崩溃，我检查调试器似乎函数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;
    });

Answer 2

问题在于两者：

<form class="container broadcast-form" action="/form" enctype="multipart/form-data" method="post">

AND

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

他们将相同的表单发送到相同的“ post”调用，因此其中一个获取数据，而另一个不获取数据，因此另一个返回错误。解决方案是让其中一个将呼叫寻址到另一个“帖子”。

Answer 3

您应该尝试删除代码中的操作，使其具有以下内容：

<form class="container broadcast-form"
enctype="multipart/form-data" method="post">

然后在sendForm()函数传递中e并在函数中添加e.preventdefault()。

Web应用程序发送表单两次

3 个答案: