用户选择数据提交后台

作者: 2010jing | 来源:发表于2017-03-26 02:50 被阅读228次

做个简单练习，题目关于点菜。要求用户注册登录之后，来到点菜页面，点菜页面数据从后台数据库获取后页面渲染出来。用户选择的菜品和数量，会自动计算单个菜品的总价，以及所有选择菜品的最后总价。客户确认提交后，保存在数据库。管理员则可以添加一个新的菜品，以及查看所有的订单，点击某一个订单，则可以看到客户选择了具体菜品的数量以及价格。由于上一篇 PHP MySQL 简单链接已经讲过如何注册将用户信息存入数据库，所以这里将不重复，仅演示用户选择菜品，计算价格，提交存入数据库，以及管理员查看订单列表和订单详情。

先上个动图

test1.gif

看过动图，大概过程如此，接下来就讲讲一步步实现的。

首先设计food 表如下

food-table.png

然后设计 order.php 页面

order-structure.png

第一部分引入数据库类，然后调用getFood()方法获得所以菜的数据集。

getFood() 方法

    public function getFood(){
        $sql = "SELECT * FROM food ";
        $result = mysql_query($sql,$this->conn);
        return $result;
    }

第二部分遍历结果集，然后将每一个菜品的信息渲染出来。

food-infor.png

第三部分是两个按钮和最后总价的内容。

order.php 页面渲染结果代码

<?php
    include('db.class.php');
    $db = new DB();
    $result = $db->getFood();

?>
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Bootstrap 101 Template</title>
        <style type="text/css">
            
            .item{
                    padding: 9px 14px;
                    margin-bottom: 14px;
                    background-color: #f7f7f9;
                    border: 1px solid #e1e1e8;
                    border-radius: 4px;
            }
        </style>

        <!-- Bootstrap -->
        <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
          <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
          <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
  <body>
    <h1>你好，世界！</h1>
    <div class="container">

    <?php
        while($row = mysql_fetch_array($result)){
    ?>
        <div class='row item'>
            <div class="col-md-2">
                <img src="<?php echo $row['image']?>" height="100px">
            </div>

            <div class="col-md-2">
                <p> <?php echo $row['name']?></p>
                <p> <?php echo $row['descript']?></p>
            </div>

            <div class="col-md-2 user-select">
                <p>Price: ￥<span><?php echo $row['price']?></span></p>
                <p>Num:</p>
                <select>
                    <option value="0">0</option>
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4">4</option>
                </select>
            </div>

            <div class="col-md-2">
                <p>SubTotal: </p>

                ￥<span class="subtotal">0</span>
            </div>
            <div class="col-md-1">
                
                <span class="foodid" style="display: none"><?php echo $row['id']?></span>
            </div>
        </div>

        <hr class="divider">
                    
    <?php

        }

    ?>

        <div class='row'>
            <div class="col-md-8">
            <button class="btn btn-primary sure"> Confirm</button>
            <button class="btn btn-primary giveup" > Cancel</button>
            </div>

            <div class="col-md-2">
                <p>Total: ￥<span class="total">0</span></p>
            </div>
        </div>

    </div>

    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">
       
    </script>
  </body>
</html>

渲染效果如下

order-page.png

JS 监听select 的变化而更改总价，以及点击按钮提交后台

下面涉及到jQuery,如没有接触，建议前往 w3school - jquery 了解一下，否则下面的知识有可能看不明白。
先看看 order的每一项菜品的结构

item-code.png

客户选择数量，总价发生变化是如何完成这个小功能的。

观察一下 select 部分代码

    <div class="col-md-2 user-select">  // 父亲节点
        <p>Price: ￥<span>123</span></p> // 第1个孩子节点
        <p>Num:</p> // 第2个孩子节点
        <select>// 第3个孩子节点
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>

从上面片段代码结构，父亲节点下有三个子节点。
用户在select 选择数据，所以我们想办法给它绑定方法。
所以这时候可以功能通过jQuery给select 绑定一个change()方法

change()方法定义和用法
当元素的值发生改变时，会发生 change 事件。
该事件仅适用于文本域（text field），以及 textarea 和 select 元素。
change() 函数触发 change 事件，或规定当发生 change 事件时运行的函数。
注释：当用于 select 元素时，change 事件会在选择某个选项时发生。当用于 text field 或 text area 时，该事件会在元素失去焦点时发生。
语法

$(selector).change()

(来源w3school)

这样我们可以通过找到 class为 user-select 下面的 select 标签绑定change方法。

$('.user-select select').change(function(){
           
 });

接下来我们就要知道用户到底选了那个一个值

$('.user-select select').change(function(){
           var num = Number($(this).children('option:selected').val()); 
 });

这里如果用户进行了select的操作，就会触发change() 方法。
$(this)表示当前对象，也就是select, select 下面的 option都是它的子节点，$(this).children('option:selected') 表示找到孩子节点中选项是被选择的节点，$(this).children('option:selected').val() 表示找到该节点之后，获取对应的值。 Number() 方法是将获取到的值，是字符串，将其转成int。

如果可以拿到用户选择的数量，那么接下来是要获取当前的菜品的价格。

再回顾一下这片段代码

<div class="col-md-2 user-select">  // 父亲节点
        <p>Price: ￥<span>123</span></p> // 第1个孩子节点
        <p>Num:</p> // 第2个孩子节点
        <select>// 第3个孩子节点
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>
    </div>

我们刚刚已经知道$(this)可以获取到当前对象，那么如果希望得到当前菜品的价格，可以看到父类下面的第一个节点的里面的span 的值就是我们所需要的price的值。

$('.user-select select').change(function(){
           var num = Number($(this).children('option:selected').val()); 
           var price = Number($(this).parent().children().eq(0).find('span').text());

 });

$(this).parent() 是找到当前节点的父类， $(this)是 select, 那么父类就是它外层的div。
$(this).parent().children().eq(0) 表示父类下面的所有孩子节点中的第一个节点，下标从0开始。
$(this).parent().children().eq(0).find('span').text() 表示在第一个孩子节点中找到 span标签并且获取里面的text值。
同样，需要用到 Number（）转 int。

到目前为止，应该懂得如何从当前对象找到父类，然后再去找到对应的子节点。

所以接下来的要做个简单的计算，并且赋值给SubTotal。
再回顾一下这个结构

item-code.png

我们需要找到subtotal的位置

$('.user-select select').change(function(){
            var num = Number($(this).children('option:selected').val()); 
            var price = Number($(this).parent().children().eq(0).find('span').text());
            var subTotal = num * price;
            $(this).parent().parent().children().eq(3).children().eq(1).text(subTotal);

 });

这里找到subTotal 的位置的方法和上面类似，请自行了解。text(subTotal)是将计算得到的值进行赋值。

目前为止，单个菜品的数量变化则会变化对应的subtotal的值。

接下来就是计算所有的总价。

因为每个菜品都会有一个类subtotal, 只需要找到所有的subtotal,进行累计就得到总价。

写一个自定义计算总价的方法 gettotal(),需要用到一个each()方法。

定义和用法
each() 方法规定为每个匹配元素规定运行的函数。
语法

$(selector).each(function(index,element))

(来源w3school)

gettotal()自定义方法

function gettotal(){
            var total = 0;
            $('.subtotal').each(function(){
                total = total + parseInt($(this).text());
            });
            console.log(total);
            return total;
 }

因为绑定在class为 subtotal，所以$(this)该对象。
$(this).text()获取到对应的text, 通过parseInt()转 int，进行累加，最后返回计算结果。

所以在用户select 一个值的时候，里面调用这个gettotal() 方法，就可以更新 total的值。

于是乎，有了这个两个方法，就可以实现了当前页面用户更改值，就可以更新对应的总价。

$('.user-select select').change(function(){
    var num = Number($(this).children('option:selected').val()); 
    var price = Number($(this).parent().children().eq(0).find('span').text());
    var subTotal = num * price;
    $(this).parent().parent().children().eq(3).children().eq(1).text(subTotal);

    var total = gettotal();
    $('.total').text(total);

});

function gettotal(){
    var total = 0;
    $('.subtotal').each(function(){
        total = total + parseInt($(this).text());
    });
    console.log(total);
    return total;
}

如何获取用户选择的数据呢？？

首先我们设计数据库用户到底要存什么数据
guest_order 表

guest_order-table.png

fid 对应food 表的id ，外键
fprice 价格
fnum 客户点的数量
fsubtotal 该菜品的总价
guestname 用户名
order_datetime 客户下单时间

还记order页面底部有两个按钮
我们给confirm 按钮绑定一个点击事件。

定义和用法
当点击元素时，会发生 click 事件。
当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。
click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
语法

$(selector).click()

(来源w3school)

按钮代码

<div class='row'>
            <div class="col-md-8">
            <button class="btn btn-primary sure"> Confirm</button>
            <button class="btn btn-primary giveup" > Cancel</button>
            </div>

            <div class="col-md-2">
                <p>Total: ￥<span class="total">0</span></p>
            </div>
        </div>

给confirm 按钮添加了 class sure,再给这个class 绑定click方法。

$('.sure').click(function(){
    
});

接下来就要考虑下如何获取数据了，我们可以尝试一下数组。而且可能是二维数组。

不妨多看一遍 order的代码结构

food-item-list.png

每一个菜品就是在一个div内，并且设置一个class 为item

对应每一个item里面的代码

item-code.png

既然我们要获取全部的菜品的数据，我们是不是可以再用一下上面提到的 each的方法。

$('.sure').click(function(){
    var data = new Array();
    $('.item').each(function(index){

       

       
    });
  
});

点击按钮之后，先new一个数组。
然后再调用熟悉的each 方法，只不过我们这里多了个参数，这里的index表示遍历每一个对象的下标值，下标从0开始。
既然来到这里，我们可以用上面已经试过的方法获取对应的值

$('.sure').click(function(){
    var data = new Array();
    $('.item').each(function(index){
        console.log("index:" + index);
       
        var foodid = $(this).children().eq(4).find('span').text();
        var price = $(this).children().eq(2).children().eq(0).find('span').text();
        var subTotal = $(this).children().eq(3).find('span').text();
        var num = $(this).children().eq(2).find('select').children('option:selected').val();
       
        
       

       
    });
  
});

这里我就可以分别每次获取到的菜品的数据。
接下来是怎样存的问题了，这里就需要到二维数组了

因为我们打算计划这样去存

save-data.png

一个数组里面，再存一个数组，里面数组数据分别对应是菜品id,菜品价格，菜品数量，已经该菜品的总价。

所以获取数据存储到二维数组如下

$('.sure').click(function(){
    var data = new Array();
    $('.item').each(function(index){
        console.log("index:" + index);
       
        var foodid = $(this).children().eq(4).find('span').text();
        var price = $(this).children().eq(2).children().eq(0).find('span').text();
        var subTotal = $(this).children().eq(3).find('span').text();
        var num = $(this).children().eq(2).find('select').children('option:selected').val();
       
        data[index] = new Array();

        data[index][0]= foodid;
        data[index][1]= price;
        data[index][2]= num;
        data[index][3]= subTotal;
       

       
    });
  
});

index 刚刚已经提到时每一个item的index下标，从0开始，
然后 data[index] = new Array(); 表示当前index下再建一个数组，
data[index][0]= foodid;
data[index][1]= price;
data[index][2]= num;
data[index][3]= subTotal;
表示二维数组下分别存储的信息。

如果你坚持一步步到这里，你大概已经快成功了，你可以起来运动下，喝杯水。
5分钟过后....

最难的部分似乎都搞点了，现在问题是怎样把数据提交到后台处理？

根据以往，我们提交数据是通过表单，这里没有，咋搞？？？

还好JavaScript 给我们提供了方法来构建html 元素。

直接上代码

function new_form(){  
    var f = document.createElement("form");  // 创建form
    document.body.appendChild(f);  //追加到body下
    f.method = "post";  //设置提交方式 post
    return f;  // 返回对象
}

         
        
function create_elements(eForm,eName,eValue){  
    var e=document.createElement("input");  // 给form 创建input
    eForm.appendChild(e);   // input 追加到 form内
    e.name=eName;   //设置 input name的值
    if(!document.all){     // css 样式设置 不显示 表单
        e.style.display='none';  
    } 
    e.value=eValue;   // input的值
    return e;   // 返回对象
}

这样的话，在需要提交数据给后台的时候，我就可以构建一个表单，然后提交给后台就好。

二维数组也有了，表单构建也可以了。
但是，JavaScript的二维数组不能够直接提交到后台，我们要先作处理。利用JSON.stringify() 方法用于将 JavaScript 值转换为 JSON 字符串。什么是JSON ? 不懂请前往学习一分钟 w3school - json

JSON 键值对是用来保存 JS 对象的一种方式，和 JS 对象的写法也大同小异，键/值对组合中的键名写在前面并用双引号 "" 包裹，使用冒号 : 分隔，然后紧接着值：

{"firstName": "John"}

这很容易理解，等价于这条 JavaScript 语句：

{firstName: "John"}

confirm 提交代码

$('.sure').click(function(){
    var data = new Array();
    $('.item').each(function(index){
        var foodid = $(this).children().eq(4).find('span').text();
        var price = $(this).children().eq(2).children().eq(0).find('span').text();
        var subTotal = $(this).children().eq(3).find('span').text();
        var num = $(this).children().eq(2).find('select').children('option:selected').val();
       
        data[index] = new Array();

        data[index][0]= foodid;
        data[index][1]= price;
        data[index][2]= num;
        data[index][3]= subTotal;

    });
        data = JSON.stringify(data); // 数组转 json

        var _f=new_form();//创建一个form表单  
        create_elements(_f,"data",data);//创建form中的input对象 , 设置name 为 data, value 为 数组转json的 数据  data
        _f.action="savefood.php";//form提交地址  
       _f.submit();
});

到此， order.php 点击提交的代码完成。

下面就到了后台 savefood.php 处理数据了。

用json_decode() 转回数组

<?php
    $data = $_POST['data'];
    $arr = json_decode($data);
    print_r( $arr);

   ?>

array-data.png

savefood.php

<?php
    $data = $_POST['data'];
    $arr = json_decode($data);

    include('db.class.php');
    $db = new DB();
    $result = $db->saveOrder($arr);
?>

后台存储数据

    public function saveOrder($arr){
        $order_datetime = date("Y-m-d h:i:s",time());//创建时间
        $sql = "INSERT INTO guest_order (fid,fprice,fnum,fsubtotal,guestname,order_datetime)VALUES "; 
        //构建拼接 sql 语句
        
        for ($i=0; $i < count($arr); $i++) { 
            //这里判断数量是否为0，如果是则跳过该次循环
            if ($arr[$i][2] == "0") {
                continue;
            }
            
            $sql = $sql . '("'.$arr[$i][0].'" , "'.$arr[$i][1].'" , "'.$arr[$i][2].'" , "'.$arr[$i][3].'" , '. '"hj"'.',"' .$order_datetime.'"),';
            
        }
        $sql=substr($sql, 0,strlen($sql)-1);
        $result = mysql_query($sql,$this->conn);
        return $result;
    }

至此，用户的订单可以保存到数据库的操作完成。

下面到管理员查看订单以及订单详情

getOrderList()

public function getOrderList(){
        $sql = "SELECT guestname,sum(fsubtotal) as total,order_datetime FROM `guest_order` group by order_datetime";
        $result = mysql_query($sql,$this->conn);
        return $result;
    }

orderlist.php

<?php
    include('db.class.php');
    $db = new DB();
    $result = $db->getOrderList();

?>


    <div class="container">
        <div class="row">
        <h1>Order List</h1>
        <table class="table table-hover ">
            <tr>
                <th> User</th>
                <th> Total</th>
                <th> Datetime</th>
                <th> Detail</th>
            </tr>
            <?php
                while($row = mysql_fetch_array($result)){
            ?>
                    <tr>
                        <td> <?php echo $row['guestname']?></td>
                        <td> <?php echo $row['total']?></td>
                        <td> <?php echo $row['order_datetime']?></td>
                        <td> <a href="<?php echo 'orderdetail.php?user='.$row['guestname'].'&'.'datetime='.$row['order_datetime']?>">view</a></td>
                        
                    </tr>

            <?php

                }

            ?>
            
        </table>

    </div>
    </div>

orderlist.png

订单详情

orderDetail($user,$datetime)


    public function orderDetail($user,$datetime){
        $sql = 'SELECT * FROM `guest_order` JOIN food on guest_order.fid = food.id WHERE guest_order.order_datetime = "'.$datetime.'" and guest_order.guestname="'.$user.'"';
        $result = mysql_query($sql,$this->conn);
        return $result;
    }

orderdetail.php

<?php
    include('db.class.php');

    $user = $_GET['user'];
    $datetime = $_GET['datetime'];
    $db = new DB();
    $result = $db->orderDetail($user,$datetime);
    

?>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap 101 Template</title>
    <style type="text/css">
        
        .item{
                padding: 9px 14px;
                margin-bottom: 14px;
                background-color: #f7f7f9;
                border: 1px solid #e1e1e8;
                border-radius: 4px;
        }
    </style>

    <!-- Bootstrap -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>你好，世界！</h1>
    <div class="container">
        <div class="row">
        <h1>Order List</h1>
        <hr class="divider">
        <h2><?php echo $user?> -- <?php echo $datetime?></h2>
        <table class="table table-hover ">
            <tr>
                <th> Image</th>
                <th> Name</th>
                <th> Price</th>
                <th> Num</th>
                <th> SubTotal</th>
            </tr>
            <?php
                $total = 0;
                while($row = mysql_fetch_array($result)){
                    $total = $total + intval($row['fsubtotal']);
            ?>
                    <tr>
                        <td> <img src="<?php echo $row['image']?>" height="100px"></td>
                        <td> <?php echo $row['name']?></td>
                        <td> <?php echo $row['price']?></td>
                        <td> <?php echo $row['fnum']?></td>                        
                        <td> <?php echo $row['fsubtotal']?></td>                        
                    </tr>

            <?php

                }

            ?>
            <tr><td>Total : <?php echo $total;?></td></tr>
        </table>

    </div>


        

    </div>

    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>
    <script type="text/javascript">



    </script>
  </body>
</html>

detail.png

以上为全部代码，希望有所帮助。

用户选择数据提交后台

先上个动图

首先设计food 表如下

然后设计 order.php 页面

第一部分引入数据库类，然后调用getFood()方法获得所以菜的数据集。

getFood() 方法

第二部分遍历结果集，然后将每一个菜品的信息渲染出来。

第三部分是两个按钮和最后总价的内容。

JS 监听select 的变化而更改总价，以及点击按钮提交后台

如何获取用户选择的数据呢？？

最难的部分似乎都搞点了，现在问题是怎样把数据提交到后台处理？

下面到管理员查看订单以及订单详情

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

PHP经验分享

用户选择数据提交后台

先上个动图

首先设计food 表如下

然后设计 order.php 页面

第一部分引入数据库类，然后调用getFood()方法获得所以菜的数据集。

getFood() 方法

第二部分遍历结果集，然后将每一个菜品的信息渲染出来。

第三部分是两个按钮和最后总价的内容。

JS 监听select 的变化而更改总价，以及点击按钮提交后台

如何获取用户选择的数据呢？？

最难的部分似乎都搞点了，现在问题是怎样把数据提交到后台处理？

下面到 管理员查看订单 以及订单详情

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

PHP经验分享

下面到管理员查看订单以及订单详情