坚持使用 jQuery 动态显示变量答案

【问题标题】：Stuck with dynamically displaying a variable using jQuery坚持使用 jQuery 动态显示变量
【发布时间】：2015-11-27 10:01:18
【问题描述】：

当用户从下拉列表中选择一个日期时，住宿天数会根据该新日期而变化。

按照本教程 www.w3schools.com/php/php_ajax_database.asp 我编写了以下代码，但是当我更改列表中的日期时，我只是在<div id="stats"> 中收到一条消息说undefined

<?php
    $dates = "";
    foreach ($check_ins as $check_in):
        $dates .= '<option value= "' . $check_in['check_in'] . '">' . $check_in['check_in'] . '</option>';
    endforeach;

    $nights = $check_ins[0]['nights'];
    if (!empty($_POST['newDate'])){
        $nights = 0;
        foreach ($check_ins as $check_in):
            if ($check_in['check_in'] === $_POST['newDate']){
                $nights += $check_in['nights'];
            }
        endforeach;
    }

?>

<html>
    <head>
        <title>Bookings stats</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
        <script>
            /*function dynamicDates() {
                var d = $("#dates").val();
                $.post("metrily.php", { newDate: d });
            }*/
            function dynamicDates(newDate){
                if (newDate == ""){
                    document.getElementById("stats").innerHTML = "";
                    return;
                } else {
                    xmlhttp = new XMLHttpRequest();
                    xmlhttp.onreadystatechange = function() {
                        if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
                            document.getElementById("stats").innerHTML = xmlhttp.responseTest;
                        }
                    };
                    xmlhttp.open("POST", "hotel.php", true);
                    xmlhttp.send("newDate=" + newDate);
                }
            }
        </script>
    </head>
    <body>
        <b>Check-in: </b>
        <select id="dates" name="check_in" onchange="dynamicDates(this.value)"><?php echo $dates; ?></select>
        <br></br>
        <div id="stats">
            <b>Nights: </b><?php echo $nights; ?>
        </div>

    </body>
</html>

【问题讨论】：

@mplungjan 我的问题是与 CodeIgniter 的混合。如果只是 PHP，我可以按照本教程完成此操作 w3schools.com/php/php_ajax_database.asp
这就是问题#1。 w3schools 不是一个很棒的 JS 资源...
如果每次用户更改下拉菜单时都需要询问后端，那么stackoverflow.com/questions/17422586/…
@mplungjan 查看编辑
如果你有 jQuery，至少使用它：function dynamicDates(newDate){ if (newDate == ""){ $("#stats").empty(); return; } else { $.post("hotel.php",{"newDate":newDate},function(data) { $("#stats").html(data); }); } } - 假设 hotel.php 只做一些计算然后<?php echo $nights; ?>

标签： javascript php jquery html codeigniter

【解决方案1】：

如果你有 jQuery，使用它：

function dynamicDates(newDate){ 
  if (newDate == ""){ 
    $("#stats").empty(); return; 
  } else { 
    $.post("hotel.php",{"newDate":newDate},function(data) { $("#stats").html(data); }); 
  } 
 }

假设hotel.php 只做一些计算然后

<?php echo $nights; ?>

【讨论】：

当我第一次访问该站点时，我只看到下拉列表。当我选择一个日期时，会显示另一个下拉列表以及夜晚的信息。所以基本上，当我选择一个日期时，我会看到 2 个签到列表和 1 个夜间消息。为什么列表显示两次？
如果 hotel.php 是您拥有的唯一 php，那么您将整个内容插入到统计信息中。有另一个只在晚上做的 php