JSデータをAJAX経由で送信してPHPと同じ画面に投稿する方法

Question

3つのチェックボックスメニューから3組のチェックボックス値を取得しようとしています。 1つのチェックボックスメニューには、PHP/SQLを使用して生成された値があります。また、私には<submit>ボタンがありません。これらのチェックボックスの値は、ユーザーがチェックするとすぐに、送信イベントではなく、必要になります。

最終的には、これらの値のセットをそれぞれ独自のPHP変数に入れて、それらを同じページで使用したいと考えています。私はAJAXを使ってJS値をPHPの変数に変換するのが最善だと読んでいます。チェックボックスメニューごとに1つずつ、最終的に私は3つのPHP変数をしたいので、 - 私はその後、私のAJAX要求が設定した

<form id="numberOrderForm" action="index.php" method="POST"> 
    <div class="wrappers" id="multi-select1Wrapper"> 
     <h2>Area Code</h2> 
     <select class="dropDownMenus" id="multi-select1" name="multi_select1[]" multiple="multiple"> 
      <?php 
       //The query asking from our database 
       $areaCodeSQL = "SELECT ac.Number AS `AreaCode`, ac.Name AS `AreaName` 
           FROM `AreaCodes` ac";                //SQL query: From the table 'AreaCodes' select 'Number' and put into 'AreaCode', select Name and put into 'AreaName' 

       $areaCodeResults = $conn->query($areaCodeSQL);              // put results of SQL query into this variable 

       if ($areaCodeResults->num_rows > 0) {                // if num_rows(from $results) is greater than 0, then do this: 
        // output data of each row 
           foreach($areaCodeResults as $areaCodeResult)          //for each item in $areCodeResults do this: 
            { 
             $areaNameAndCode = $areaCodeResult['AreaCode'] ." ". $areaCodeResult['AreaName']; //get AreaCode and AreaName from query result and concat them 
             $areaName = $areaCodeResult['AreaName'];         // get AreaName 
             $areaCode = $areaCodeResult['AreaCode'];         //get AreaCode 

             ?><option class="menuoption1" name="menuAreaCode" value="<?php echo $areaCode ?>" ><?php echo $areaNameAndCode; ?></option><?php //Create this option element populated with query result variables 
            } 
       } 

      ?> 
     </select> 
    </div>  




    <div class="wrappers" id="multi-select2Wrapper"> 
     <h2>Number Type</h2> 
     <select class="dropDownMenus" id="multi-select2" name="multi_select2[]" multiple="multiple"> 
      <option class="menuoption2" name="package" value="gold">Gold</option> 
      <option class="menuoption2" name="package" value="silver">Silver</option> 
      <option class="menuoption2" name="package" value="bronze">Bronze</option> 
     </select> 
    </div> 

    <div class="wrappers" id="multi-select3Wrapper"> 
     <h2>Order</h2> 
     <select class="dropDownMenus" id="multi-select3" name="multi_select3[]"> 
      <option class="menuoption3" value="sequential">Sequential</option> 
      <option class="menuoption3" value="random">Random</option> 
     </select> 
    </div> 
</form> 

：だから、私は今のところ以下のように構築しています。それぞれがAJAXリクエストを行い、成功した場合は、それらのチェックボックス値を含む基本的なアラートボックスを表示します。そして、ここで彼らは、次のとおりです。

<script> 
$(function(){ 
    $("#multi-select1").change(function(e){ 
     var areaCode = $("#multi-select1").val(); 
     $.ajax({ 
      type: 'post', 
      url: '/index.php', 
      dataType: 'text', 
      data: 'areacode=' +areaCode, 
      success: function(d){ 
       if (d.length) alert(d); 
      } 
     });   
    }); 


    $("#multi-select2").change(function(e){ 
     var numberOrder = $("#multi-select2").val(); 
     $.ajax({ 
      type: 'post', 
      url: '/index.php', 
      dataType: 'text', 
      data: 'numberorder=' +numberOrder, 
      success: function(d){ 
       if (d.length) alert(d); 
      } 
     });   
    }); 

    $("#multi-select3").change(function(e){ 
     var order = $("#multi-select3").val(); 
     $.ajax({ 
      type: 'post', 
      url: '/index.php', 
      dataType: 'text', 
      data: 'order=' +order, 
      success: function(d){ 
       if (d.length) alert(d); 
      } 
     });   
    }); 

}); //end ready 

これまでのところは良いです。これらのアラートボックスには適切な値が含まれています。私のコンソールも...index.php?areaCode=*value,value*であり、POST要求を出しているようです。

<div> 
    <?php 
     if(isset($_POST['areaCode'])){ 
       $ac = $_POST['areaCode']; 

       foreach($ac as $value){ 
         echo $value;  
       } 
     } 
    ?> 
</div> 

しかし、何も起こりません： そして私は、私はこのように掲載されている値をエコーすることができるだろうと想像したいです。誰も助けることができますか？

Answer 1

まず、responseのvarnameは、function() paramと関数自体の両方で使用する必要があります。以下のリビジョンを参照してください。

<script> 
    $(function(){ 
     $("#multi-select1").change(function(e){ 
      var areaCode = $("#multi-select1").val() 
       $.post("index.php?areaCode="+areaCode, function(dude){ 
        alert(dude); 
       });   
      });   


     $("#multi-select2").change(function(e){ 
      var numberType = $("#multi-select2").val() 
       $.post("index.php?numberType="+numberType, function(obama){ 
        alert(obama); 
       });   
      });   


     $("#multi-select3").change(function(e){ 
      var order = $("#multi-select3").val() 
       $.post("index.php?order="+order, function(response){ 
        alert(response); 
       });   
      });   
    }); 
</script> 

第二に、あなたはそれが簡単に速記フォーム$.post()のではなく、完全な$.ajax()形式を使用することを見つけるかもしれません。それらは同じ方法ですが、完全な形式は、物事のハングアップを得るまで使いやすいです。 $.post()、$.get()と$.load()あなたは_isデータを示すか、あなたのjavascript `関数でreturned_されていないことから始めることができます$.ajax()

var varvalue = "some text"; 
var area = $('#area').val(); 
$.ajax({ 
    type: 'post', 
    url: 'another_php_file.php', 
    data: 'request=' +area_code_lookup+ '&area=' +area+ '&varname=' +varvalue, 
    success: function(d){ 
     if (d.length) alert(d); 
    } 
}); 

another_php_file.php

<?php 
    $request = $_POST['request']; 
    $recd = $_POST['varname']; 

    if ($request == 'area_code_lookup'){ 
     $area = $_POST['area']; 
     //$area_loc = do a MySQL Lookup 
     $out = '<div class="row">'; 
     $out .= 'Location: ' .$area_loc; 
     $out .= '</div><!-- .row -->'; 
     echo $out; 
    }else if ($request = 'something_else'){ 
     echo 'PHP side received: ' .$recd; 
    }else if ($request = 'something_else'){ 
     echo 'Do a MySQL lookup, build HTML, and echo it back'; 
    }