阶高手详细的网络

-4

我有一个页面，我需要创建和不知道如何去这样做前端。我有两个表，oders和order_details（主/细节）我需要以某种方式创建几个搜索字段，将查询发送到服务器带回订单，并显示它们在网格类型的视图。阶高手详细的网络

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

我可以做json，也可以返回java结果集，但我不知道如何去做前端..如果有人可以指向我jquery的例子，或沿着这些线的任何东西，将不胜感激。

来源

2014-10-27 user2797021

对于前端，我将开始在看网页形式http://www.w3schools.com/html/html_forms.asp – 2014-10-27 23:18:26

当你列出的订单，它通常是不超过30，这样下去，并收集所有的订单详细信息和订单 - 根本不需要使用ajax。最后，隐藏订单详细信息并单击显示它们。 – skobaljic 2014-10-27 23:27:37

比方说你有数据库表：

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>

没有测试它，但你可以得到的想法。

来源

2014-10-27 23:56:25 skobaljic

阶高手详细的网络

回答

相关问题