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

到目前为止一切顺利。这些警报框包含正确的值。在发出POST请求时，我的控制台也是...index.php?areaCode=*value,value*，所以看起来也是顺序。所以我想我能够回应出像这样的POSTED值：

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

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

但没有任何反应。有人可以帮忙吗？

Answer 1

首先，必须在response参数和函数本身中使用function() varname。见下面的修订。

<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';
    }

如何通过AJAX发送JS数据并将其发布到与PHP相同的屏幕上

1 个答案: