根据下拉列表使用数据库值动态更新 div

Question

请参阅website。

我的数据库有一个表，其中包含值“名称”（左侧第 2 步下的事件）、“价格”、“日期”等，我想在右侧的暗框中动态显示它们，具体取决于选择了哪个事件。

我目前正在使用下面的代码显示事件本身，但我不确定如何开发它以根据此选择获取数据库值。我猜是某种 .get()。

<script type="text/javascript">

    $(document).ready(function() {
            $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
    });

    $('#club').change(function(event) {
        $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
    });

</script>

这让我很困惑很长时间，所以任何帮助都将非常非常感谢！

编辑

感谢您的回复。这是我现在拥有的，但它不起作用。

jQuery:

<script type="text/javascript">

$(document).ready(function() {
        $('#right_inside').html('<h2>' + $('#club').val() + '</h2>');
});

$('#club').change(function(event) {
    $.ajax({
        type: "post",
        url: "eventinfo.php",
        data:  $(this).serialize(),
        success: function(data) {
            $('#right_inside').html('<h2>' + $('#club').val() + '</h2>Price'+data.price);
            },
        dataType: "json"
    });

});

</script>

eventinfo.php:

    <?php
// the name of the input text box is 'club'
    $night = $_POST['club'];
    $night = mysql_real_escape_string($night);

// one of the columns values included in * is 'price'
// this line was previously: $query = mysql_query("SELECT * FROM nights WHERE name = '$night'");
    $query = "SELECT * FROM nights WHERE name = '$night'";

        $result = mysql_query($query);
        $items = array();

        if($result && mysql_num_rows($result) > 0) { 
            while ($row = mysql_fetch_array($result)) { 
                $items[] = array($row[0]);
                }         
        } 

        mysql_close(); 
        // convert into JSON format and print
        echo json_encode($items);
    ?>

Answer 1

最好的做法是使用 xmlhttp 对象来加载您的 PHP 页面，该页面会回显数据。从那个 xmlhttp 对象，您可以将 responseText（这将是您的 PHP 页面的输出内容）分配给一个 Javascript 变量。

换句话说，您可能想使用AJAX。

Answer 2

这是使用客户端模板的好地方。使用 jQuery.tmpl 并为右侧制作一个模板（示例如下）：

<script id="infoTemplate" type="text/html">
    <div>
        <span>${price}</span>
        <span>${information}</span>
    </div>
</script>

然后，在 PHP 中创建一个方法，接收类似于 eventId 的内容并返回一个类似于以下内容的 JSON 对象：{"price":"123.34","information":"some info here"}。 要加载您的模板，请执行以下操作：

$(document).ready(function(){
    // ... other stuff

    $.template("infoTemplate", $("#infoTemplate").html());
});

然后，在您的更改事件处理程序中，执行以下操作：

$('#club').change(function(event) {
    $.get('/yourNewPHPMethod', $('#club').val(), function(data){
        $('#right_inside').html($.tmpl('infoTemplate', data));
    });
});

抱歉，没有时间测试其中的任何内容，但这是主要思想，应该可以帮助您为将来的任何此类工作建立良好的模式。 请参阅下面的 jQuery.tmpl 文档： http://api.jquery.com/jquery.tmpl/

Answer 3

如果我的理解正确，您希望通过 AJAX 调用来获取价格。所以像

$('#club').change(function(event) {
     $.ajax(
     {type: "post",
     url: "/path/to/price",
     data:  $(this).serialize(),
     success: function(data)
     {
      $('#right_inside').html('<h2>' + $('#club').val() + '</h2>Price'+data.price);
     },
    dataType: "json"
});

那么既然你使用的是 PHP，就获取你想要的值并将它们加载到一个数组中并使用 json_encode。

更新

对于 PHP 尝试更改

    if($result && mysql_num_rows($result) > 0) { 
        while ($row = mysql_fetch_array($result)) { 
            $items[] = array($row[0]);
            }         
    } 

到

    if($result && mysql_num_rows($result) > 0) { 
        while ($row = mysql_fetch_array($result)) { 
            $items[] = array("price"=>$row['price']);
            }         
    } 

更新 #2

尝试将以下内容添加到您的 PHP 文件中，靠近顶部：

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 26 Jul 1997 05:00:00 GMT');
header('Content-type: application/json');