Как отправить данные JS через AJAX и разместить его на том же экране, что и PHP

Question

Я пытаюсь получить 3 набора флажков из 3-х флажков. Обратите внимание, что в одном флажке есть значения, сгенерированные с использованием PHP/SQL. Также обратите внимание, что у меня нет кнопки <submit>. Я хочу эти значения флажка, как только пользователь проверяет их, а не на событие отправки.

В конечном счете, я хочу, чтобы эти наборы значений были в их собственной отдельной переменной PHP каждый, и я хочу, чтобы они использовались на одной странице. Я прочитал, что лучше всего использовать AJAX для преобразования этих значений JS в переменные в PHP. И поэтому я построил следующий до сих пор:

<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 настроить - по одному в меню галочки, так как в конечном итоге я хочу 3 PHP переменные. Каждый из них выполняет запрос 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(), так и в самой функции. См. Ниже изменения.

<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> 

Во-вторых, вы можете найти его проще использовать полный формат $.ajax(), а не сокращенном виде $.post(). Они - один и тот же метод, но полная форма проста в использовании, пока вы не повесите вещи. Обратите внимание, что $.post(), $.get() и $.load() все сокращенные формы $.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'; 
    }