乙個小案例搞懂前 後端是如何進行資料互動的

對應不少初學前端知識的小夥伴來說，如果實現前後端的資料互動，腦袋裡很模糊，現在給大家介紹乙個簡單的案例幫助大家理解。

首先，我們來製作乙個登入框，用來輸入帳號和密碼

登入

帳號 //裝乙個√或×，提示是否輸入正確 
0//帳號是否正確輸入的狀態字

//主要就是ajax部分，這裡用到了jquery中的$.ajax函式，詳細用法請參照jq文件 $.ajax(,//傳遞什麼資料，這裡我用的是json格式，如果不知道什麼是json資料，可以自己搜尋一下 'success':function(data),400,function()); break; } case 2:alert('密碼錯誤');break; } }, 'type':'post',//type是ajax的方法，可以用post可以用get，兩種方法的區別可以自己查閱資料 'datatype':'json',//傳遞的資料型別，對應我上面的資料格式，這裡用json。資料型別也可以是html/xml等 });

//下面來看，php指令碼是如何接受資料，處理資料，返回資料的 <?php $username=$_post['username']; $password=$_post['password'];//根據不同的方法，php會把接收的資料儲存在$_post/$_get這樣的全域性變數中，前面的ajax我們用的是post方法，所以這裡用$_post接收資料 $usermsg =array( 'fhw7328126' => '7328126', 'fhwlmmz' => 'feng7328126', 'dearmmz' => '123456', 'rooter' => 'dd', ); $gouwuche=array( 'fhw7328126' => 2, 'fhwlovemmz' => 3, 'dearmmz' => 8, 'rooter' => 123, ); $name=array( 'fhw7328126' => '魚魚風', 'fhwmmz' => '**', 'dearmmz' => '明珠', 'rooter' => '管理員', );//這裡我定義了3個陣列，分別儲存有使用者的帳號密碼購物車資訊和暱稱，事實上，一般這樣的資料都是儲存在資料庫中，php可以與資料庫互動，獲得這些資料表。由於我還沒有掌握如何使用資料庫，這裡就直接用偷懶的方法定義好資料表； $type=0;//定義乙個變數，用來代表php處理資料的不同結果，預設0 $gouwuchenum=0;//定義乙個變數，用來裝使用者購物車數量資訊，預設0 $name2=0;//定義乙個變數，用來裝使用者的暱稱，預設0 foreach($usermsg as $key => $value) else if($username==$key and $password!=$value) } $response=array(//定義php要返回的資料，這裡先定義成陣列型別 'type' => $type,//返回狀態字 'gouwuchenum' =>$gouwuchenum,//返回購物車資訊 'name' => $name2,//返回暱稱 ); echo json_encode($response);//將要返回的陣列轉化成json資料，列印出來。注意，php列印出什麼，那麼前端接收的資料就是什麼。通篇瀏覽這個php檔案，只有最後一行列印了乙個json資料，所以前端得到的資料就是這個json。 ?>

下面，我們返回頭來看看，前端接收到資料後是怎麼處理的。

//success函式，表示前端收到資料成功後，要做什麼

'success'
:function
(data
),400
,function
());
break;}
case2:
alert
('密碼錯誤'
);break
;//type=2，表示使用者存在但是密碼不匹配
}}

乙個小案例搞懂前 後端是如何進行資料互動的

對應不少初學前端知識的小夥伴來說，如果實現前後端的資料互動，腦袋裡很模糊，現在給大家介紹乙個簡單的案例幫助大家理解。首先，我們來製作乙個登入框，用來輸入帳號和密碼 class login class logintittle 登入 class loginspan 帳號 type text id use...

如何搭建乙個前後端分離的專案

如下 動態請求，client nginx tomcat nginx client 靜態請求，client nginx client nginx作用 1 處理靜態請求 2 負載均衡 3 解決跨域問題 自定義標識 呼叫controller請求時都加上乙個字首，比如 con nginx處理請求時，請求如果...

如何做乙個前後端分離專案

程式設計師工作 4.前後端整合測試 前後端請求流程 專案是基於前後端分離的架構進行開發，前後端分離架構總體上包括前端和服務端，通常是多人協作並行開發，對於不同職位的人來說，有不同的側重點。1 需求分析 梳理使用者的需求，分析業務流程 2 介面定義 根據需求分析定義介面 3 服務端和前端並行開發 依據...