浅谈前后台交互

�前后台交互

举例：外卖餐厅订餐
初识状态：

<form method="get">
    <div>丽德快餐厅</div>
    <input type="button" name="button" id="btn" value="立即订餐">  
</form>

具体的菜单（菜品+价格），前台要从后台获取，这时就要前台想后台发送一个数据，jquery将Ajax封装。以GET方式向后台提交数据，链接后台的地址存在URL里面，async判断是否异步，一般都会选择true，异步，因为同步会出现卡顿现象，dataType，要求后台给我们返回的数据类型，success数据传送成功后生成的函数，函数里面的参数就是后台给我们返回的数据。
根据上图的流程，可以理解为，用户 通过脚本语言的 Ajax，向服务器传送HTTP请求，服务器将请求处理后返回一组数据到Ajax，经过一些列编码成HTML和CSS呈现给用户。毕竟所有的程序最终都要转化为HTML和CSS用户才能看到。

$.ajax({
        type: "get", //数据提交类型
        url: "form-2.php?action=num",
        data: {},
        dataType: "json",
        async: true,
        success: function(data){
            for(i in data) {    
                var div = document.createElement('div');
                document.body.appendChild(div);
                $("<span>"+data[i][0]+"</span> <span class='price'>"+data[i][1]+"</span> <input type='checkbox' name='key[]' value="+i+"/> 订餐份数：<input type='text' name='amount_"+i+"'/>").appendTo(div);
            }
        }
    });

前台通过GET传送的请求，后台也要用GET方法接受，接受后将前台的需求返回。

$menu = array();
    $menu[] = array("红烧肉",10);
    $menu[] = array("烤鸡", 20);
    $menu[] = array( "鲍鱼", 30);
    $menu[] = array( "青菜汤",4);
    //返回界面所需要的数据
    if(!empty($_GET["action"])) {
        $jsonstr = json_encode($menu);
        echo $jsonstr;
    }

这样前台的界面就会形成。

image.png

界面形成后，用户开始订餐

image.png
此时前台需要将用户选中的菜品和所选份数的数据传递给后台，后台将所选菜品对应的价格与份数相加，计算出总价，返回给前台，前台将接受到的数据呈现给用户

$("#btn")[0].onclick = function() {
        var arrIndex = [];
        var strIndex = '';
        var arrCount = [];
        var strCount = '';
        //遍历界面中的复选框，将勾选中的下标和对应的份数保存到数组里面
        $('input:checkbox').each(function(index,val) {
            if(val.checked == true) {
                arrIndex.push(index);
                arrCount.push($('input:text')[index].value)
            }
        //将数组变成字符串：=> 用字符串传递比较安全
            strIndex = arrIndex.join();
            strCount = arrCount.join();
        })
        $.ajax({
            type: "post", //数据提交类型
            url: "form-2.php",
            data: {"key":strIndex,"amount_":strCount},
            dataType: "json",
            async: true,
            success: function(data){
                $("<h4>您的总订单：</h4>").appendTo(document.body);
                for(var i =0;i<data.length-1;i++) {
                    $("<div></div>").html(data[i].name+"　份数："+data[i].amount+"　小计："+data[i].price).appendTo(document.body);
                }
                $("<span></span>").html("总价:").appendTo(document.body);
                $("<span></span>").html(data[2].total).appendTo(document.body);
            }
        });
    }

前台通过POST方法，将勾选框的下标 key 和对应的份数 amount_ 传送到后台，后台接受到数据之后进行处理，将小计与最后的总价返回给前端。

if(!empty($_POST["key"])){
        $totalPrice = 0;
        $userSelected = array();
        $keys = explode(',',$_POST['key']);
        $amount = explode(',',$_POST['amount_']);
        foreach($keys as $key => $val){
             $amount1 = $amount[$key];
             $userSelected[$key]['name'] = $menu[$val][0];
             $userSelected[$key]['price']= $menu[$val][1]*$amount1;
             $userSelected[$key]['amount'] = $amount[$key];
             $totalPrice += $userSelected[$key]['price'];
        }
        $userSelected[]['total'] = $totalPrice;
//       recordMenu($userSelected);
         echo json_encode($userSelected);
    }

结果如下（简易版网上订餐）

image.png

旁白：前端与服务器的交互。一个请求对应一个回应。

欢迎来到大瑞的微博