wie JS-Daten über AJAX zu senden und es auf dem gleichen Bildschirm wie PHP

Question

Ich versuche, 3 Sätze von Kontrollkästchen Werte aus 3 Kontrollkästchen Menüs zu erhalten. Beachten Sie, dass ein Kontrollkästchenmenü Werte enthält, die mit PHP/SQL generiert wurden. Beachten Sie auch, dass ich absichtlich keinen <submit> Button habe. Ich möchte diese Checkbox-Werte, sobald der Benutzer sie überprüft - nicht auf ein Submit-Ereignis.

Letztendlich möchte ich, dass diese Mengen von Werten in ihrer eigenen individuellen PHP-Variablen sind und ich möchte, dass sie auf derselben Seite verwendet werden. Ich habe gelesen, dass es am besten ist, AJAX zu verwenden, um diese JS-Werte in PHP-Variablen umzuwandeln. Und so habe ich die folgenden bisher gebaut:

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

Ich habe dann meine AJAX-Anforderungen einrichten - eine pro Checkbox Menü, da letztlich möchte ich 3 PHP-Variablen. Jeder erstellt eine AJAX-Anfrage und zeigt, falls er erfolgreich ist, ein Basisalarmfeld, das diese Checkbox-Werte enthält. Und hier sind sie:

<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 

So weit so gut. Diese Benachrichtigungsfelder enthalten die richtigen Werte. Meine Konsole ist auch ...index.php?areaCode=*value,value* bei der Herstellung der POST-Anfrage, so scheint in Ordnung zu sein. Und ich würde so vorstellen, dass ich in der Lage sein, Werte Echo aus, die wie folgt geschrieben wurden:

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

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

Aber nichts passiert. Kann jemand helfen?

Answer 1

Zuerst muss der response Varname sowohl im function() Parameter als auch in der Funktion selbst verwendet werden. Siehe unten Revisionen.

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

Zweitens, könnten Sie finden es einfacher, eher das volle $.ajax() Format zu verwenden als die Kurzform $.post(). Sie sind die gleiche Methode, aber die vollständige Form ist einfacher zu bedienen, bis Sie den Überblick haben. Beachten Sie, dass $.post(), $.get() und $.load() sind alle Stenografie Formen $.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'; 
    }