【问题标题】:how to send JS data via AJAX and post it on same screen as PHP如何通过 AJAX 发送 JS 数据并将其发布在与 PHP 相同的屏幕上
【发布时间】:2016-09-15 04:07:32
【问题描述】:

我正在尝试从 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*,这样看起来也很正常。 因此,我想我将能够像这样回应已发布的值:

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

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

但是什么也没发生。有人可以帮忙吗?

【问题讨论】:

  • 您可以首先在您的 javascript function(response){ alert(areaCode); }); 中显示 返回或未返回的数据,但 function(response){ alert(response); }); 不会删除它,但 function(response){ alert(response); }); 可能会

标签: php jquery ajax checkbox


【解决方案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);
    }
});

另一个_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';
    }

【讨论】:

  • @Liam 您可能还会发现this post 中引用的示例很有帮助。请注意,一个常见的新手错误是尝试将 AJAX 发送到发送 AJAX 的同一 PHP 文件 - 请参阅 this post
  • 啊,谢谢你的帮助,但我能问一下吗?如果我已将该数据发送到“another_php_file.php” - 那么我是否需要使用 AJAX 将该数据发送回“index.php”(我的原始页面),以便可以在那里显示。还有我发送到“another_php_file.php”的数据——是字符串还是其他类型的数据?我最终需要将该数据发送到后端以使用该数据进行查询,我的后端团队需要一个字符串或 PHP 变量中的该数据来完成他们的工作。将其显示在同一页面上只是一个测试,以确保数据的格式正确,以便他们使用
  • 无论 PHP 端回显什么(使用 echo 命令)——我的意思是 anything:HTML、文本字符串、echo json_encode($phpArray);——将在另一侧为名为@9​​87654336@ 的变量。这真的很容易。尝试做实验。试试alert(here)(如果这里是成功函数参数中定义的名称)
  • 好吧,到目前为止这很有意义,我已经在上面进行了编辑,但是你是说没有another_php_file.php 就不能使用 AJAX 将 JS 变量转换为 PHP 变量吗?我现在在alert 框中获取网页代码。但是,在控制台中的 Firebug 及其有关请求的信息中,我可以在“参数”选项卡中看到这些值,这些值已在我的复选框中选中。我还尝试将其更改为 index.php 并在同一页面上使用它,因为这是我的最终目标:&lt;div&gt; &lt;?php $recd = $_POST['areacode']; echo 'PHP side received: ' .$recd; ?&gt; &lt;/div&gt; 但它没有用。
  • 呸——不是“参数”标签——“发布”标签!对不起:/
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2020-04-19
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-03-14
  • 1970-01-01
相关资源
最近更新 更多