ajax 继续发布以前的请求

Question

使用 Bootstrap 框架 3.3.7 我有这样的代码：

$('#field_submit').click(function() {
       //omitted part not relevant
       if (counter == 0) {
           //non ho riscontrato errori, quindi posso inviare il form
           data = $('#new_field').serialize();
           $.ajax({
           //omitted part not relevant
           }).done(function(data) {
            //aggiungo il campo creato alla lista dei campi sulla sinistra
            if(data.status==200){
                //omitted part not relevant
            }else{
              //non sono riuscito a caricare i dati
              $('#modal-text').html('<p class="text-danger">'+data.message+'</p><b>Dati per il debug</b> (saranno inviati in automatico nella mail):<br>');
              var risposta = data;
              $("#modal-text").append(JSON.stringify(data));
              $('#message').modal('show');
              $('.segnalazione').click(function(){
                if($(this).attr('id')=='error_submit'){
                  mail= true;
                }
                //effettuo il caricamento
                $.ajax({
                  url: 'segnalazione.php',
                  method: 'post',
                  data: {form:'new_field', valori:risposta, mail: mail},
                  dataType: 'json'
                });
              });
            }       
          });
       }
   });

您可以看到主 ajax 调用是否返回不同于 200 的状态，然后我打开一个模式，显示一些信息并单击两个按钮中的任何一个按钮 (class="segnalazione") 我将一些数据发送到第二个ajax 调用。

模式代码：

<div class="modal fade fade" id="message" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Crea un nuovo campo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body" id="modal-text">

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary segnalazione" data-dismiss="modal">Chiudi</button>
        <button type="button" class="btn btn-primary segnalazione" id="error_submit" data-dismiss="modal">Invia mail</button>
      </div>
    </div>
  </div>
</div>

考虑这种情况：我打开页面，运行第一个 ajax，显示模式并发送数据。这工作正常。 然后，无需重新加载页面我再次执行此操作，再次显示模式并发送数据。这次我看到两个请求，第一个请求来自上一次调用的数据，第二个请求是正确的数据。 如果我再做一次，我会看到三个调用，第一个调用第一个数据，第二个调用第二个数据，第三个调用正确。 因此，在数据库的第二页中重复三次后，我将获得第一个数据的 3 倍、第二个数据的两倍和第三个数据。

我尝试使用 stopPropagation 但它会阻止模式在单击按钮时关闭（使用 data-dismiss 方法）。

Answer 1

确保您没有通过第二个“数据”保留对第一个“数据”的引用，因为您使用的是相同的变量名。通过将第二个变量命名为“data”，您将更改第一个变量。

建议称其为“json”或其他名称。这样可以避免名称冲突。

JS 对象引用与变量名相关联，而不是与内部数据相关联。通过更新第二个变量 - 实际上您更新了第一个变量。

更多信息在这里：https://codeburst.io/explaining-value-vs-reference-in-javascript-647a975e12a0