浅谈前后台交互

2017-11-17

前后台交互

举例：外卖餐厅订餐

初识状态：

<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;
	}

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

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

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

$("#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);
	}

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

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