Javascript 网站的订单主控详细信息
我有一个页面，我需要创建，但不知道如何去做前端 我有两个表，orders和order\u details master/detail，我需要以某种方式创建两个搜索字段，将查询发送到服务器，返回订单并在网格类型的视图中显示它们 当用户单击其中一行时，我可以返回服务器，比如说使用订单id，抓取订单详细信息记录并在底部显示它们Javascript 网站的订单主控详细信息,javascript,jquery,html,Javascript,Jquery,Html,我有一个页面，我需要创建，但不知道如何去做前端 我有两个表，orders和order\u details master/detail，我需要以某种方式创建两个搜索字段，将查询发送到服务器，返回订单并在网格类型的视图中显示它们 当用户单击其中一行时，我可以返回服务器，比如说使用订单id，抓取订单详细信息记录并在底部显示它们 我可以做json，也可以返回java结果集，但我不知道如何做前端。。如果有人能给我介绍jquery示例或类似的内容，我将不胜感激。假设您有数据库表： order(orderid
我可以做json，也可以返回java结果集，但我不知道如何做前端。。如果有人能给我介绍jquery示例或类似的内容，我将不胜感激。假设您有数据库表：
order(orderid, date, total)
order_details(id, orderid, products)
<?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>
还没有测试过，但您可以了解它。对于前端，当您列出订单时，我将开始查看web表单，它通常不超过30个，因此继续收集所有订单的详细信息和订单-根本不需要使用ajax。最后，隐藏订单详细信息并单击显示。