作為一個(gè)合格的軟件測(cè)試人員， 能夠熟練定位bug的位置是屬于前端還是后端，是必備技能之一。所以就需要明白前后端數(shù)據(jù)是怎么進(jìn)行交互的。

一、網(wǎng)站數(shù)據(jù)處理主要分為三層

第一層，表示層，這部分可以用HTML代碼，CSS/Javascript代碼來(lái)實(shí)現(xiàn)等。通過(guò)前端代碼可以實(shí)現(xiàn)網(wǎng)頁(yè)的布局和設(shè)計(jì)。這層又可以稱(chēng)為顯示層。也就是你用瀏覽器打開(kāi)能看到的網(wǎng)頁(yè)。

第二層，是業(yè)務(wù)層，這層是負(fù)責(zé)處理數(shù)據(jù)的。常用的代碼語(yǔ)言有PHP,JSP，Java等。通過(guò)這些后臺(tái)處理語(yǔ)言的算法來(lái)處理前臺(tái)傳回的數(shù)據(jù)。必要的時(shí)候進(jìn)行操作數(shù)據(jù)庫(kù)，然后把結(jié)果返回給前端網(wǎng)頁(yè)。

第三層，是數(shù)據(jù)層，這個(gè)就是數(shù)據(jù)庫(kù)，用來(lái)存儲(chǔ)數(shù)據(jù)的。通過(guò)業(yè)務(wù)層的操作可以實(shí)現(xiàn)增刪改數(shù)據(jù)庫(kù)的操作。

①你接觸到的是這個(gè)網(wǎng)頁(yè)是屬于表示層，這個(gè)網(wǎng)頁(yè)一般由HTML標(biāo)簽結(jié)合CSS/JAVASCRIPT來(lái)實(shí)現(xiàn)的。 這時(shí)候你要先填入數(shù)據(jù)。

②然后你按提交觸發(fā)后臺(tái)處理機(jī)制，這時(shí)候數(shù)據(jù)會(huì)傳到后臺(tái)的代碼進(jìn)行處理。這部分代碼根據(jù)不同網(wǎng)站可以使PHP,JSP，JAVA等。 代碼根據(jù)程序員預(yù)設(shè)的算法將收到的數(shù)據(jù)進(jìn)行處理之后會(huì)相應(yīng)的對(duì)數(shù)據(jù)庫(kù)進(jìn)行操作，存儲(chǔ)數(shù)據(jù)等。

③成功操作完數(shù)據(jù)庫(kù)之后，業(yè)務(wù)層的代碼會(huì)再向表示層也就是顯示器端傳回一個(gè)指令通知你表格填寫(xiě)成功。

二、前后端數(shù)據(jù)交互方法

1、HTML賦值

2、JS賦值

3、script填充JSON

4、AJAX獲取JSON

前三個(gè)數(shù)據(jù)交互方法在AJAX獲取json的方法普遍使用之后，就很少使用了，今天主要了解一下ajax獲取json:

$.ajax({

type: “POST”,//type是ajax的方法

url : “<%=path%>/resource/usermenus”,//參數(shù)url,要把參數(shù)傳到什么地方

data : {parentid:parentid,parentpath:parentpath},//傳遞什么數(shù)據(jù)

success : function(data){//sucess表示，當(dāng)數(shù)據(jù)返回成功后要怎么做，返回的數(shù)據(jù)存儲(chǔ)在data

)}

Ajax進(jìn)行數(shù)據(jù)交互就和我們使用接口測(cè)試工具的概念一樣，請(qǐng)求方式get/post,url地址，還有需要傳遞的參數(shù)，然后對(duì)返回的響應(yīng)值進(jìn)行處理。

在明白Ajax的原理之后，知道前后端數(shù)據(jù)交互方法，就可以快速定位數(shù)據(jù)傳輸?shù)臅r(shí)候是前端還是后端的錯(cuò)誤了。