Данные успеха Ajax называются дважды

Question

Я не понимаю, почему мои данные называются два раза. Я попытался заменить append, но он не работает. Я думаю, это из-за моего контроллера.

Это мой Ajax вызов:

jQuery(document).ready(function($) { 
$('#referenceProduit').change(function(){ 
    // On recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    // Requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     // Function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      $('.result').empty(); 
      $('.result').prepend(data); 
     } 
    }); 
}); 

HTML код:

<div class="form-group"> 
    <label for="referenceProduit" class="col-sm-1 control-label">Reference</label> 
    <div class="col-sm-2"> 
     <select class="form-control" name="referenceProduit" id="referenceProduit"> 
      <option selected="selected" disabled="disabled">Choisir</option> 
      <?php foreach($lesProduits as $unProduit){?> 
      <option name="<?php echo $unProduit['id'];?>" value="<?php echo $unProduit['id'];?>"><?php echo $unProduit['reference']?></option> 
      <?php } ?> 
     </select> 
    </div> 
    <div class="result"></div> 
</div> 

Контроллер

<?php 
    $action = $_REQUEST['action']; 
    switch($action){ 
     case 'accueil':{ 
      include("vue/v_accueil.php"); 
      break; 
     } 
     case 'saisirReclamation':{ 
      $lesSites = $pdo->getLesSites(); 
      $lesProduits = $pdo->getLesProduits(); 
      $lesClients = $pdo->getLesClients(); 
      $lesNatures = $pdo-> getLesNatures(); 
      $lesActivites = $pdo->getLesActivites(); 
      if(isset($_REQUEST['referenceProduit'])){ 
       $leProduit = $pdo->getLeProduit(); 
       foreach ($leProduit as $key => $value) { 
        echo '<input type="text" name="'.$key.'" value="'.$value.'"/>'; 
       } 
      } 
      include_once("vue/v_saisirReclamation.php"); 
      break; 
     } 
    } 
?> 

Answer 1

Изменение этой линии

$('.result').empty(); 

в

$('.result').html(' '); 

Answer 2

success:function(data){ 
    // On affiche la réponse du serveur 
    $('.result').empty(); 
    $('.result').prepend(data); 
} 

Вместо приведенного выше кода, используйте этот код ниже

success:function(data){ 
    // On affiche la réponse du serveur 
    $('.result').html(data); 
} 

Answer 3

Давайте посмотрим на код:

jQuery(document).ready(function($) { 
$('#referenceProduit').change(function(){ 
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    //requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     //function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      $('.result').empty(); 
      $('.result').prepend(data); 
     } 
    }); 
}); 

Ваш контент запускает событие change. Вы должны убедиться, что ваш ответ не срабатывает change. Это простое решение с использованием флага:

jQuery(document).ready(function($) { 
var shouldChange = true; 
$('#referenceProduit').change(function(){ 
    if (!shouldChange) { 
     return; 
    } 
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat 
    var req=$('#referenceProduit').val(); 
    //requête ajax, appel du fichier function.php 
    $.ajax({ 
     type: "post", 
     url: "index.php?uc=gererReclamation&action=saisirReclamation", 
     data: "referenceProduit="+req, 
     dataType : "html", 
     //affichage de l'erreur en cas de problème 
     error: function(XMLHttpRequest, textStatus, errorThrown) { 
      alert(XMLHttpRequest + '--' + textStatus + '--' + errorThrown); 
     }, 
     //function s'il n'y a pas de probleme 
     success:function(data){ 
      //On affiche la réponse du serveur 
      shouldChange = false; 
      $('.result').empty(); 
      $('.result').prepend(data); 
      shouldChange = true; 
     } 
    }); 
});