浅谈前后台交互

举例：外卖餐厅订餐

• 初识状态：

~~~

丽德快餐厅

~~~

• 具体的菜单（菜品+价格），前台要从后台获取，这时就要前台想后台发送一个数据，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);(""+data[i][0]+" "+data[i][1]+" 订餐份数：").appendTo(div);
}
}
});
~

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

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

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

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

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

~
("#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){
$("

您的总订单：

").appendTo(document.body);
for(var i =0;i