Question

我有一个我需要创建的页面，不知道如何去做前端。

我有两个表，oders和order_details（主/详细）我需要以某种方式创建几个搜索字段，将查询发送到服务器带回订单并显示在网格类型的视图。

当用户点击其中一行时，我可以返回服务器，比如订单ID，抓住order_details记录并以某种方式显示在底部。

我可以做json，也可以返回java结果集，但我不知道如何去做前端..如果有人可以指向我jquery示例，或任何其他内容这些线路将非常感激。

Answer 1

假设您有数据库表：

order(orderid, date, total)
order_details(id, orderid, products)

比index.php文件看起来像这样：

<?php
switch( $_POST['action'] ) {
    case 'get_orders':
        /* you need to create this function (func_query), it would return an array of MySQL result set */
        $orders = func_query("select * from orders");
        header('Content-Type: application/json');
        echo json_encode($orders);
        exit();
        break;
    case 'get_order_details':
        $order_details = func_query("select * from orders_details where orderid=" . mysql_real_escape_string($_POST['orderid']));
        header('Content-Type: application/json');
        echo json_encode($order_details);
        exit();
        break;
};
?>
<!doctype html>
<html>
    <head>
        <title>Orders</title>
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).on('ready', function() {
                $.ajax({
                    url: 'index.php',
                    type: 'post',
                    data: {'action': 'get_orders'},
                    dataType: 'json',
                    success: function(data) {
                        $('.orders_list').html('');
                        var orders_list_html = '';
                        if ( data.length>0 ) {
                            orders_list_html += '<ul>';
                            $.each( data, function(i, order) {
                                orders_list_html += '<li data-orderid="' + order.orderid + '">' + order.date + ', ' + order.total + '</li>';
                            });
                            orders_list_html += '<ul>';
                            $('.orders_list').html( orders_list_html );
                        };
                    }
                });
                $('.orders_list').on('click', 'li[data-orderid]', function(e) {
                    var thisList = $(this);
                    var orderid = thisList.data('orderid');
                    $.ajax({
                        url: 'index.php',
                        type: 'post',
                        data: {'action': 'get_order_details', 'orderid': orderid},
                        dataType: 'json',
                        success: function(data) {
                            /* Do something with data, append to thisList or show it somewhere */
                        }
                    });
                });
            });
        </script>
    </head>
    <body>
        <h1>Your orders</h1>
        <div class="orders_list"></div>
    </body>
</html>

Haven没有对它进行测试，但你可以得到这个想法。

订购网站的主要详细信息

1 个答案: