Javascript Ajax成功数据调用两次

我不明白为什么我的数据被调用了两次。我试图替换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;
        }
    }
?>

更改此行

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

到

使用下面的代码代替上面的代码

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

让我们看看您的代码：

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

您的内容触发
更改
事件。您需要确保您的响应不会触发
更改
。这是一个使用标志的简单解决方案：

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

你能显示你的HTML代码吗？检查。可能是您的HTM中多次出现referenceProduit id我的视图中只有一个referenceProduit您是否尝试使用其他浏览器>更改此行$（'.result'）.empty（）；到$（'.result'）.html（''）；将变量数据更改为成功响应：function（data）将result类再次更改为result1same..（注释这一行$（'.result'）.html（data）；好的。那么您的结果将给出该html两次。检查您得到的结果html。这就是问题所在，然后我必须做什么？@LucasFrugier，您测试过这个吗？console.log（$shouldChange）？@LucasFrugier，你是否尝试过用我给出的代码替换你的代码示例，看看它是否运行两次？它再次运行两次是的
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);
        }
    });
});

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