在不同的div上返回ajax数据

时间：2016-01-13 09:40:49

标签： ajax

我有一个ajax函数，它在div1的html页面上返回数据，但我需要在同一个函数中发送其他数据，但是在不同的div（div2）中，是否可能？我试过但它没有工作

更新： 

jQuery(document).ready(function($) {
$('#idSalarie').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#idSalarie').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "POST",
        url: "lib/function.php",
        data: "idSalarie="+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
            $('.salarie').empty();
            $('.salarie').prepend(data)
            $('input[name=poste_nom]').val($('input:hidden[name=poste_nom]').val());

            $('.formation').empty();
            $('.formation').prepend(data)
            $('input[name=nom_formation]').val($('input:hidden[name= nom_formation]').val());               
        }
    });
  });
});

功能.php 

<?php 

if(isset($_POST['idSalarie'])){ 
$displayForm = $bdd->prepare(
    'SELECT poste_nom, ups_type_contrat, serv_nom, serv_id_resp, user_credit_cpf, user_indice_salarial,
     FLOOR( DATEDIFF( CURDATE( ) , user_dateentree ) /365 ) AS dateEntree 
     FROM USER 
     INNER JOIN USER_POSTE_SERVICE 
        ON USER.user_id= USER_POSTE_SERVICE.ups_poste_id  
     INNER JOIN POSTE 
        ON USER_POSTE_SERVICE. ups_poste_id = POSTE.poste_id 
     INNER JOIN SERVICE 
        ON USER_POSTE_SERVICE.ups_id_serv = SERVICE.serv_id 
     WHERE user_id = :idSalarie 
        ORDER BY user_nom ASC');
$displayForm->bindParam(':idSalarie', $_POST['idSalarie']);
$displayForm->execute();
$resDisplayForm=$displayForm->fetch(PDO::FETCH_ASSOC);
foreach ($resDisplayForm as $key => $value) {
    echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
}

echo'          
    <div class="form-group">
        <label for="poste_nom" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="poste_nom" readonly>
        </div>
    </div>
    <div class="form-group">
        <label for="nom_formation" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="nom_formation" readonly>
        </div>
    </div> 


';}
?>

page.html中 

$displaySalarie = $bdd->query('SELECT user_id, user_prenom, user_nom FROM USER ORDER BY user_nom ASC');
        <form class="form-horizontal" name="formEtape1" id="formEtape1" method="post">
          <div role="tabpanel" class="tab-pane active" id="Etape-1">
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">Information Salarié</h3>
                </div>
                <div class="panel-body">
                  <div class="form-group">
                    <label for="nomSalarie" class="col-sm-2 control-label">Nom</label>
                    <div class="col-sm-10">
                      <select class="form-control" name="nomSalarie" id="idSalarie">
                          <option disabled selected>Choisir un salarié</option>
                          <?php while($ligne = $displaySalarie->fetch()){?>
                          <option value="<?php echo $ligne['user_id'];?>"><?php echo $ligne['user_nom'].' '.$ligne['user_prenom'];?></option>
                          <?php } ?>
                        </select>
                    </div>
                  </div>
                  <div class="salarie"></div>        
                </div>
              </div>
              <div class="panel panel-default">
                <div class="panel-heading">
                  <h3 class="panel-title">Informations Entretien</h3>
                </div>
                <div class="panel-body">
               <div class="formation"></div>
                </div>


        </form>

1 个答案:

答案 0 :(得分：0)

有几种变体：

1）你可以制作一种HTML和JSON格式的混合物

<强> function.php      

if(isset($_POST['idSalarie'])){ 
$displayForm = $bdd->prepare(
    'SELECT poste_nom, ups_type_contrat, serv_nom, serv_id_resp, user_credit_cpf, user_indice_salarial,
     FLOOR( DATEDIFF( CURDATE( ) , user_dateentree ) /365 ) AS dateEntree 
     FROM USER 
     INNER JOIN USER_POSTE_SERVICE 
        ON USER.user_id= USER_POSTE_SERVICE.ups_poste_id  
     INNER JOIN POSTE 
        ON USER_POSTE_SERVICE. ups_poste_id = POSTE.poste_id 
     INNER JOIN SERVICE 
        ON USER_POSTE_SERVICE.ups_id_serv = SERVICE.serv_id 
     WHERE user_id = :idSalarie 
        ORDER BY user_nom ASC');
$displayForm->bindParam(':idSalarie', $_POST['idSalarie']);
$displayForm->execute();
$resDisplayForm=$displayForm->fetch(PDO::FETCH_ASSOC);
$data = array( 'resDisplayForm'=> array());
foreach ($resDisplayForm as $key => $value) {
    $data['resDisplayForm'][$key] =  $value;
}

$data['salarie'] =  '          
    <div class="form-group">
        <label for="poste_nom" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="poste_nom" readonly>
        </div>
    </div>';
$data['formation'] = '
    <div class="form-group">
        <label for="nom_formation" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="nom_formation" readonly>
        </div>
    </div> 


';}
echo json_encode($data);die;

和JS 

jQuery(document).ready(function($) {
$('#idSalarie').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#idSalarie').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "POST",
        url: "lib/function.php",
        data: "idSalarie="+req,
        dataType : "json",
        //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
            $('.salarie').empty();
            $('.salarie').prepend(data.salarie)
             $('input[name="poste_nom"]').val(data.resDisplayForm.poste_nom);

            $('.formation').empty();
            $('.formation').prepend(data.formation)
            $('input[name="nom_formation"]').val(data.resDisplayForm.nom_formation);               
        }
    });
  });
});

2）你可以使用缓冲容器，在此之后=＆gt;从那里复制数据。

在页面末尾添加

<div id="buffer"></div>

和你的And JS 

jQuery(document).ready(function($) {
$('#idSalarie').change(function(){
    //on recupere la valeur de l'attribut value pour afficher tel ou tel resultat
    var req=$('#idSalarie').val();
    //requête ajax, appel du fichier function.php
    $.ajax({
        type: "POST",
        url: "lib/function.php",
        data: "idSalarie="+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){

            $('#buffer').html(data);
            //On affiche la réponse du serveur
            $('.salarie').empty();
            $('.salarie').prepend($('#buffer').find('.bsalarie').html())
            $('input[name=poste_nom]').val($('#buffer input:hidden[name="poste_nom"]').val());

            $('.formation').empty();
            $('.formation').prepend( $('#buffer').find('.bformation')))
            $('input[name=nom_formation]').val($('#buffer input:hidden[name="nom_formation"]').val());     

            $('#buffer').empty()
      }
    });
  });
});

在function.php中 

<?php 

if(isset($_POST['idSalarie'])){ 
$displayForm = $bdd->prepare(
    'SELECT poste_nom, ups_type_contrat, serv_nom, serv_id_resp, user_credit_cpf, user_indice_salarial,
     FLOOR( DATEDIFF( CURDATE( ) , user_dateentree ) /365 ) AS dateEntree 
     FROM USER 
     INNER JOIN USER_POSTE_SERVICE 
        ON USER.user_id= USER_POSTE_SERVICE.ups_poste_id  
     INNER JOIN POSTE 
        ON USER_POSTE_SERVICE. ups_poste_id = POSTE.poste_id 
     INNER JOIN SERVICE 
        ON USER_POSTE_SERVICE.ups_id_serv = SERVICE.serv_id 
     WHERE user_id = :idSalarie 
        ORDER BY user_nom ASC');
$displayForm->bindParam(':idSalarie', $_POST['idSalarie']);
$displayForm->execute();
$resDisplayForm=$displayForm->fetch(PDO::FETCH_ASSOC);
foreach ($resDisplayForm as $key => $value) {
    echo '<input type="hidden" name="'.$key.'" value="'.$value.'"/>';
}

echo'          
    <div class="form-group bsalarie">
        <label for="poste_nom" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="poste_nom" readonly>
        </div>
    </div>
    <div class="form-group bfomation">
        <label for="nom_formation" class="col-sm-2 control-label">Poste occupé</label>
        <div class="col-sm-10">
            <input type="text" class="form-control" name="nom_formation" readonly>
        </div>
    </div> 


';}
?>

此代码存在一些语法错误，请在上传到生产之前进行检查：）

相关问题
最新问题