?前后臺(tái)交互

舉例：外賣餐廳訂餐
初識(shí)狀態(tài)：

<form method="get">
    <div>麗德快餐廳</div>
    <input type="button" name="button" id="btn" value="立即訂餐">  
</form>

具體的菜單（菜品+價(jià)格）困檩，前臺(tái)要從后臺(tái)獲取绳锅，這時(shí)就要前臺(tái)想后臺(tái)發(fā)送一個(gè)數(shù)據(jù)，jquery將Ajax封裝典奉。以GET方式向后臺(tái)提交數(shù)據(jù)躺翻，鏈接后臺(tái)的地址存在URL里面，async判斷是否異步卫玖，一般都會(huì)選擇true公你，異步，因?yàn)橥綍?huì)出現(xiàn)卡頓現(xiàn)象假瞬，dataType陕靠，要求后臺(tái)給我們返回的數(shù)據(jù)類型，success數(shù)據(jù)傳送成功后生成的函數(shù)脱茉，函數(shù)里面的參數(shù)就是后臺(tái)給我們返回的數(shù)據(jù)剪芥。
根據(jù)上圖的流程，可以理解為琴许，用戶 通過腳本語言的 Ajax税肪，向服務(wù)器傳送HTTP請(qǐng)求，服務(wù)器將請(qǐng)求處理后返回一組數(shù)據(jù)到Ajax榜田，經(jīng)過一些列編碼成HTML和CSS呈現(xiàn)給用戶益兄。畢竟所有的程序最終都要轉(zhuǎn)化為HTML和CSS用戶才能看到。

$.ajax({
        type: "get", //數(shù)據(jù)提交類型
        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+"/> 訂餐份數(shù)：<input type='text' name='amount_"+i+"'/>").appendTo(div);
            }
        }
    });

前臺(tái)通過GET傳送的請(qǐng)求箭券，后臺(tái)也要用GET方法接受净捅，接受后將前臺(tái)的需求返回。

$menu = array();
    $menu[] = array("紅燒肉",10);
    $menu[] = array("烤雞", 20);
    $menu[] = array( "鮑魚", 30);
    $menu[] = array( "青菜湯",4);
    //返回界面所需要的數(shù)據(jù)
    if(!empty($_GET["action"])) {
        $jsonstr = json_encode($menu);
        echo $jsonstr;
    }

這樣前臺(tái)的界面就會(huì)形成邦鲫。

image.png

界面形成后灸叼，用戶開始訂餐

image.png

$("#btn")[0].onclick = function() {
        var arrIndex = [];
        var strIndex = '';
        var arrCount = [];
        var strCount = '';
        //遍歷界面中的復(fù)選框，將勾選中的下標(biāo)和對(duì)應(yīng)的份數(shù)保存到數(shù)組里面
        $('input:checkbox').each(function(index,val) {
            if(val.checked == true) {
                arrIndex.push(index);
                arrCount.push($('input:text')[index].value)
            }
        //將數(shù)組變成字符串：=> 用字符串傳遞比較安全
            strIndex = arrIndex.join();
            strCount = arrCount.join();
        })
        $.ajax({
            type: "post", //數(shù)據(jù)提交類型
            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+"　份數(shù)："+data[i].amount+"　小計(jì)："+data[i].price).appendTo(document.body);
                }
                $("<span></span>").html("總價(jià):").appendTo(document.body);
                $("<span></span>").html(data[2].total).appendTo(document.body);
            }
        });
    }

前臺(tái)通過POST方法捉腥，將勾選框的下標(biāo) key 和對(duì)應(yīng)的份數(shù) amount_ 傳送到后臺(tái)氓拼，后臺(tái)接受到數(shù)據(jù)之后進(jìn)行處理，將小計(jì)與最后的總價(jià)返回給前端抵碟。

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

結(jié)果如下（簡(jiǎn)易版網(wǎng)上訂餐）

image.png

旁白：前端與服務(wù)器的交互桃漾。一個(gè)請(qǐng)求對(duì)應(yīng)一個(gè)回應(yīng)。

歡迎來到大瑞的微博