1

私は次のコードを持っています：

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

ここでわかるように、私には2つの関数がinit()あり、add(..)：init（）は、ページがロードされたときに照合されます。

 <body onload="init()">

ボタンがクリックされたときにadd（..）：

 <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>
4

1 に答える 1

2

2回呼び出し.ajaxStart()ているので、2番目のAJAX呼び出しを開始したときに両方が呼び出されるのは理にかなっています（まだ実行されていない場合）。最初のAJAX呼び出しが完了したら、次のようajaxStartに、要素にアタッチされているイベントハンドラーのバインドを解除する必要があります。#GPSs

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

これは、.off()jQuery1.7で導入された関数を使用します。以前のバージョンを使用している場合は、.unbind()代わりに使用してください。

于 2012-04-18T17:18:59.793 に答える