Ajax成功数据调用两次

Question

I don't understand why my data is called two times. I tried to replace append, but it doesn't work. I think it's because of my controller.

This is my Ajax call:

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

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

Controller

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

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

Instead of above code, use this below code

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

Answer 2

Let us take a look at your code:

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);
        }
    });
});

Your content triggers the change event. You need to make sure that your response does not trigger change . This is a simple solution using a flag:

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;
        }
    });
});

Answer 3

Change this line

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

to

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