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

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

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

class="login">class="logintittle">登入

class="loginspan">帳號 type="text"id="username"value="輸入你的帳號"/>
//裝乙個√或×，提示是否輸入正確 
/>0
/>//帳號是否正確輸入的狀態字 class="xbtn"src=""/>密碼 type="password"id="password"/>
/>
type="button"value="登 錄"/>

這是登入框的html部分，css部分也不說了，這裡不是重點

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

上述指令碼解釋了，ajax是如何將前端的資料傳送入後台的

//下面來看，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;//定義乙個變數，用來裝使用者的暱稱，預設0foreach($usermsg as$key =>$value)elseif($username==$key and$password!=$value)}$response=array(//定義php要返回的資料，這裡先定義成陣列型別'type'=>$type,//返回狀態字'gouwuchenum'=>$gouwuchenum,//返回購物車資訊'name'=>$name2,//返回暱稱);echo json_encode($response);//將要返回的陣列轉化成json資料，列印出來。注意，php列印出什麼，那麼前端接收的資料就是什麼。通篇瀏覽這個php檔案，只有最後一行列印了乙個json資料，所以前端得到的資料就是這個json。

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

對應不少初學前端知識的小夥伴來說，如果實現前後端的資料互動，腦袋裡很模糊，現在給大家介紹乙個簡單的案例幫助大家理解。首先，我們來製作乙個登入框，用來輸入帳號和密碼 登入 帳號 裝乙個 或 提示是否輸入正確 0 帳號是否正確輸入的狀態字 這是登入框的html部分，css部分也不說了，這裡不是重點 主要...

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

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

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

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