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（）在加载页面时它的colled：

 <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请求期间在add(...)中显示了一个gif（loader）：

 $("#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 ()： enter image description here

当ajax请求完成后，从数据库中检索选项，然后显示到<div id="GPSs">： enter image description here

当我点击按钮时出现问题，图像再次显示： enter image description here

有解决方案吗？

完整代码：

<%@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>

Answer 1

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

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

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

$（“＃id”）。ajaxStart（...）在ajax请求期间被调用两次

1 个答案: