Ajax 成功数据调用了两次

Question

我不明白为什么我的数据被调用了两次。我试图替换附加，但它不起作用。我想是因为我的控制器。

这是我的 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

让我们看看你的代码：

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

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

改变这一行

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

到

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