javascript - $("#id").ajaxStart(...) 在 ajax 请求期间被调用两次

Question

我有以下代码：

<script language="javascript">
function add(idautomobile,marque,model,couleur,type,puissance,GPS){ 

 $("#notification").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });



      $.ajax({ 
           type: "POST", 
           url: "ajoutAutomobile", 
           data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS},
           error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
           success: function(retour){ 
             $("#notification").empty().append(retour).removeClass("error").addClass("success");
                  } 
             });

   }
    else{
    $("#notification").empty().append("* Vérifiez les types de données").addClass("error");
        }

    }

function init(){

   $("#GPSs").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });     
    $.ajax({
        type:"GET",
        url: "selectImei" ,
        error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
        success: function(retour){ 
            $("#GPSs").empty().append(retour)
                  }
          });
    }
</script>

正如您在此处看到的，我有两个功能init()，并且add(..)： init() 在页面加载时将其收集：

 <body onload="init()">

并在单击按钮时添加（..）：

 <input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)">

<div id="notification">我在函数中的 ajax 请求期间显示了一个 gif（加载器）add(...)：

 $("#notification").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });

init() 函数中的相同（ <select>使用数据库中的选项进行初始化）：

$("#GPSs").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });

一切都很好，“ajax-loader.gif”被加载到<div id="GPSs">，然后在收到响应时显示带有选项的呈现选择。

问题是当我调用 add(..) 函数时，图像 'ajax-loader.gif' 再次加载到<div id="GPSs">...

最初页面被加载，函数init ()被调用：在此处输入图像描述

当 ajax 请求完成时，从数据库中检索选项然后显示到<div id="GPSs">：在此处输入图像描述

当我点击按钮时的问题，图像再次显示：在此处输入图像描述

有解决方案吗？

完整代码：

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>

        <title>Ajout automobile</title>
        <%@include file="includes/head.html" %>  
        <script language="javascript">
function add(idautomobile,marque,model,couleur,type,puissance,GPS){ 

 $("#notification").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });


         select = document.getElementById("type" );
         type = select.options[select.selectedIndex].value;
         select2 = document.getElementById("GPS" );
         GPS = select2.options[select2.selectedIndex].value;
         Vidautomobile=document.getElementById('idautomobile').validity.valid;
         Vmarque=document.getElementById('marque').validity.valid;
         Vmodel=document.getElementById('model').validity.valid;
         Vcouleur=document.getElementById('couleur').validity.valid;
         Vtype=document.getElementById('type').validity.valid;
         Vpuissance=document.getElementById('puissance').validity.valid;
         VGPS=document.getElementById('GPS').validity.valid;

if(Vidautomobile&&Vmarque&&Vmodel&&Vcouleur&&Vtype&&Vpuissance&&VGPS)
{ 
      $.ajax({ 
           type: "POST", 
           url: "ajoutAutomobile", 
           data: {idautomobile1:idautomobile,marque: marque,model:model,couleur:couleur,type:type,puissance:puissance,GPS:GPS},
           error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
           success: function(retour){ 
             $("#notification").empty().append(retour).removeClass("error").addClass("success");
                  } 
             });

   }
    else{
    $("#notification").empty().append("* Vérifiez les types de données").addClass("error");
        }

    }

function init(){

   $("#GPSs").ajaxStart(function(){
   $(this).empty().append("<center><br/><img src='img/ajax-loader.gif'></center>");
 });     
    $.ajax({
        type:"GET",
        url: "selectImei" ,
        error: function(xhr, ajaxOptions, thrownError){ $("#notification").empty().append("* Erreur Serveur Veillez rééssayer plus tard cause: "+thrownError).addClass("error"); } ,
        success: function(retour){ 
            $("#GPSs").empty().append(retour)
                  }
          });
    }
</script>
    </head>
    <body onload="init()">
        <%@include file="includes/header.html" %>  


<div id="notification"><!-- zone de notification -->

</div>
<!--  Le contenu  -->
     <div id="content">      
    <form name="f">
        <table>
        <tr>   
           <td><b><i>Immatricule</i></b> </td>
           <td><input type="text" pattern="\w{5,30}" required placeholder="Immaticule" name="idautomobile" id="idautomobile"></td>
        </tr>

        <tr>
            <td>  <b><i>Marque</i></b></td> 
            <td> <input type="text"  required placeholder="Marque" name="marque" id="marque"></td>
        </tr>

        <tr>    
            <td><b><i>Model</i></b> </td>
            <td><input type="text" pattern="\w{3,30}" required placeholder="Model" name="model" id="model"></td>
        </tr>  
        <tr>
            <td><b><i>Couleur</i></b> </td>
            <td>  <input type="text" pattern="\w{3,30}" required placeholder="Couleur" name="couleur" id="couleur"></td>
         </tr>

        <tr>
            <td> <b><i>type</i></b> </td>
            <td><select name="type" id="type"> 
             <option  value="voiture" >Voiture </option>
             <option  value="camion" >Camion </option>
                </select> </td>  
        </tr>

          <tr>
            <td><b><i>Puissance</i></b> </td>
            <td>  <input type="text" pattern="\d{1}" required placeholder="Puissance" name="puissance" id="puissance"></td>
         </tr>

         <tr>
             <td><b><i>GPS</i></b></td>
             <td id="GPSs"></td>
         </tr>

    </table>
     <input type="button" value="Ajouter Automobile" OnClick="add(idautomobile.value,marque.value,model.value,couleur.value,type.value,puissance.value,GPS.value)">



 </form>

       </div>
    <!-- iclure le footer-->
<%@include file="includes/footer.html" %>   
<!-- fin iclure-->    
   </body>
</html>

score 2 · Accepted Answer

你调用.ajaxStart()了两次，所以当你发起第二个 AJAX 调用时，你会被调用是有道理的（假设没有一个已经在运行）。您需要做的是，一旦初始 AJAX 调用完成，取消绑定到元素的ajaxStart事件处理程序，如下所示：#GPSs

$('#GPSs').off('ajaxStart');

它使用了.off()jQuery 1.7 中引入的函数。如果您使用的是早期版本，请.unbind()改用。

javascript - $("#id").ajaxStart(...) 在 ajax 请求期间被调用两次

1 回答 1

Related

Reference