javascript - 2 ajax 在同一事件上 "onchange"导致冲突

Question

我有一个带有下拉列表的表单。在更改时，它调用 2 个 ajax 函数:

<select onchange="getLimite(this.value); getPrice(this.value);">

这些函数调用发送 SQL 查询的 PHP 脚本。

问题:一个函数有效，另一个无效。

这样:

<select onchange="getLimite(this.value); getPrice(this.value);">

只有 getPrice(this.value) 有效。

这样:

<select onchange="getPrice(this.value); getLimite(this.value);">

只有 getLimite(this.value) 有效。

其中一个函数的来源(例如):

function getPrice(billet) {

   if(billet == 'vide') {
       document.getElementById("blocPrixP").innerHTML = '';
   }
   else {
       var prixBlocP = document.getElementById("blocPrixP");
       prixBlocP.innerHTML = '<img src="images/loading.gif" alt="loading" title="loading" />';
       creerRequete(); // new XMLHttpRequest();
       var urlPrix = 'prix.php?billet='+billet;
       requete.open('GET', urlPrix, true);
       requete.onreadystatechange = function() {
           if(requete.readyState == 4) {
               if(requete.status == 200) {

                   affichePrix();

               }
           }
       };
       requete.send(null);
   }

}

prix.php 看起来像这样:

if(isset($_GET['billet'])) {
    $billet = $_GET['billet'];
}
else {
    $billet = false;
}


if(false !== $billet) {
    $requete_prix = $bdd->prepare('SELECT nom_billet, prix_billet FROM ce_billet WHERE nom_billet = :nom_billet');
    $requete_prix->execute(array(
        ':nom_billet' => $billet
    ));

    $data = $requete_prix->fetch();
        echo $data['prix_billet'];
}

else {
    echo 'Error'; 
}

编辑:其他功能

    function getLimite(billet_bis) {
       if(billet_bis == 'vide') {
           document.getElementById('blocQuantite').innerHTML = '';
       }
       else {
           var blocQuantite = document.getElementById('blocQuantite');
           blocQuantite.innerHTML = '<img src="images/loading.gif" alt="loading" title="loading" />';
           creerRequete();
           var url_limite = 'limite.php?billet='+ billet_bis;
           requete.open('GET', url_limite, true);
           requete.onreadystatechange = function()
           {
               if(requete.readyState == 4)
               {
                   if(requete.status == 200)
                   {
                       afficheLimite(); 
                   }
               }
           };
           requete.send(null);
       }
   } 

限制.php :

if(isset($_GET['billet'])) {
    $billet2 = $_GET['billet'];
}
else {
    $billet2 = false;
}

if(false !== $billet2) {
    $requete_limite = $bdd->prepare("SELECT id_billet, nom_billet, limitation_chiffre_billet FROM ce_billet WHERE nom_billet = :nom_du_billet");
    $requete_limite->execute(array(
        ':nom_du_billet' => $billet2
    ));
    $data = $requete_limite->fetch();

    $limite = intval($data['limitation_chiffre_billet']);

    if($limite == '') {
        $liste = NULL;
    }
    else {

        $liste = '<select id="quantite-billet" name="quantite-billet-name" onchange="getQte(document.getElementsByClassName(\'selecttwo\')[0].value);">'; // 
        $liste .= '<option value="vide" id="vide">- - - Choisissez la quantité - - -</option>';

        for($i = 1; $i <= $limite; $i++) {
            $liste .= '<option value="'.$i.'" id="'.$i.'billet">'.$i.'</option>';
        }

        $liste .= '</select>';

    }

    echo $liste;

}

else {
    echo "Erreur";
}

编辑 2:函数 creerRequete()、函数 affichePrix()、函数 afficheLimite()

/* creerRequete() */
var requete = null;
function creerRequete() {
    try {
        requete = new XMLHttpRequest();
    }
    catch (microsoft) {
        try {
            requete = new ActiveXObject('Msxml2.XMLHTTP');
        }
        catch(autremicrosoft){
            try {
                requete = new ActiveXObject('Microsoft.XMLHTTP');
            }
            catch(echec) {
                requete = null;
            }
        }
    }
    if(requete == null) {
        alert('Ajax does not work');
    }
}


/* afficheLimite() */
function afficheLimite() {
    var limite = requete.responseText;
    var blocQuantiteb = document.getElementById('blocQuantite');
    blocQuantiteb.innerHTML = limite;

}


/* affichePrix() */

function affichePrix() {
    var prixDuBillet = requete.responseText;
    var prixBloc = $("#blocPrix");
    var totalprice = $("#prixtotal");
    prixBloc.val(parseFloat(prixDuBillet));
    totalprice.val(prixBloc.val() + ' €');

    $('#quantite-billet').on('change', function() {
        var quantite = $("#quantite-billet option:selected").val();    
        totalprice.val((Math.round((prixBloc.val() * parseInt(quantite)) * 100) / 100 ) + ' €'); 
    });

    document.getElementById("blocPrixP").innerHTML = '';

}

我不知道如何分别调用这两个函数。

Answer 1

您是否尝试过从包装函数中调用这两者，并将调用作为您的 onchange 事件处理程序发送？像这样:

<select onchange="getLimiteAndPrice(this.value)">

function getLimiteAndPrice(billet) {
    getLimite(billet);
    getPrice(billet);
}