パラメータとしてJS変数を使用してSQLクエリを実行する方法

Question

私のウェブサイトにはフォームがあります。フォーム内では、私はSQLテーブル（ループで充電）からデータを取る選択メニューがあります。私はいくつかのjsスクリプト（完全に動作している）でフォームのさまざまな部分を表示します。最後のステップでは、提出されたデータの概要がわかります。しかし、私はどのように "選択"データを取得し、同じページに表示するか分からない。

<form role="form" id="myform" method="post" action="logs_post.php"> 
         <div class="tab-content"> 
          <div class="tab-pane active" role="tabpanel" id="step1"> 
           <div class="step1"> 
            <h3> Choose the Client</h3> 
            <div class="row"> 
             <div class="col-md-12"> 
              <script type="text/javascript"> 
               $(document).ready(function() { 
                $(".js-example-basic-single").select2(
                ); 
               }); 
              </script> 
              <label for="exampleInputEmail1">TA Name</label> 
              <?php 
              echo '<select class="js-example-basic-single form-control" name="TAName" id="TAName" style="color:black;" >'; 

              while($cat = $NAMEClients->fetch()){ 
               echo ' 
               <option style="color:black;" value="'.$cat[ID].'">'.'<p id="nameta" >'.$cat[nom_agence].'</p>'.' - '.'<p id="office" >'.$cat[OID].'</p>'.'</option>'; 
               } 
               echo '</select>'; 
               ?> 
               <?php json_encode($NAMEClients) ?> 
             </div> 
            </div> 
           </div> 
           <ul class="list-inline pull-right"> 
            <li><button type="button" id="thebutton" class="btn btn-primary next-step">Save and continue</button></li> 
           </ul> 

           <script> 
           $('#thebutton').click(function(e) { 
            e.preventDefault(); 
            console.log($('.js-example-basic-single').val()); 
           }); 
           </script> 


           <?php 
            /*$requete = "SELECT nom_agence, OID FROM agencies WHERE ID="($('.js-example-basic-single').val()) " "; 
            $reponse->query($requete);*/ 
           ?> 
          </div>........... 

私は実行したい要求をコメントに入れました。私の問題は、あなたが私にそれを実行する方法についていくつかのアイデアを与えることができますWHERE ID="($('.js-example-basic-single').val()) "

です。

NB：私はいくつかのAJAXの提案を見てきましたが、私はそれを使用する方法を知りません。

Answer 1

使用jqueryのAJAX（）ここでは、その構文は非常に単純です：

var elemId = $('.js-example-basic-single').val(); 

$.ajax({ 
    url: 'process.php', 
    method: 'post', 
    data: { 
    // key: value pair like 
    id: elemId, 
    success: function(response){ 
     // Do something here 
    } 
    } 
}); 

process.php：

$id = $_POST['id']; 

ここ$idは、あなたが更新できる$('.js-example-basic-single').val();

Answer 2

の値が含まれていますリフレッシュせずにページアンダードルンド。 HTML、CSS、JavaScript、PHP用に別々のファイルを作成することをお勧めします。すべてのファイルを1つのファイルにまとめないでください。これが前進の道です。 クラスセレクタを使用しており、ボタンがあることがわかりました。したがって、このメソッドを試してください：

<script> 
$(document).ready(function() { 
$('#thebutton').click(function() { 
    var data = {     
     basicSingle : $('.js-example-basic-single').val() // or use .text() if val() doesn't work 
    }; 
    $.post('phpFilename', data, function(data) { 
     console.log(data); //php returns data  
    });    
    }; 
}; 
</script> 


<?php 
basicSingle = test_input($_POST["basicSingle"]); 
$sql = /* your code here */ 
echo data; 
mysqli_close($conn); 
?>