最近在搞最原始的PHP，發(fā)現(xiàn)前后端分離的項(xiàng)目，的確比用模板引擎的項(xiàng)目好。至少在用戶體驗(yàn)上好太多（不看占用內(nèi)存方面）。估計(jì)以后還是要用vue開發(fā)前端，做前后端分離。

這里后端的源碼是這樣的邏輯，提交表單后走的是這一串代碼：

$useName = trim($_POST["userName"]); $password = trim($_POST["password"]); $captcha = trim($_POST["captcha"]);if(empty($useName) || empty($password)){$this->error("用戶名或密碼不能為空", "", "", "login"); } if(empty($captcha)){$this->error("驗(yàn)證碼不能為空", "", "", "login"); } if(Captcha::checkCaptcha($captcha)){$this->error("驗(yàn)證碼錯(cuò)誤", "", "", "login"); }

然后對(duì)應(yīng)的error函數(shù)是這樣的：

protected function error($msg, $platform, $controller, $action, $time = 3){if(!$platform){$platform = P;}if(!$controller){$controller = C;}if(!$action){$action = A;}echo $msg;$refresh = "Refresh:" . $time . ";url=" . URL . "index.php?p=" . $platform . "&c=" . $controller . "&a=" . $action;header($refresh);exit; }

如下不輸入任何點(diǎn)擊登錄后：

?會(huì)先進(jìn)入這個(gè)頁面：

然后又回到登錄頁面了，這太拉跨了。

用Fiddler抓下看看：

第一個(gè)包：

?

可以從Refresh中看到為3，代表3秒后進(jìn)入后面那個(gè)url，然后body里面的字符串被打印到瀏覽器上。整個(gè)架構(gòu)設(shè)計(jì)就是用的php加smarty模板引擎，沒有使用前后端分離。

修改邏輯：

這里把refresh改成0，然后url那里加個(gè)msg=用戶名或密碼不能為空。前端用個(gè)js，把這個(gè)msg獲取到，然后放到開頭提示用戶，只能這樣了。搞個(gè)野路子了。

php修改如下：

protected function error($msg, $platform, $controller, $action, $time = 0){if(!$platform){$platform = P;}if(!$controller){$controller = C;}if(!$action){$action = A;}$encodingMsg = urlencode($msg);$refresh = "Refresh:" . $time . ";url=" . URL . "index.php?p=" . $platform . "&c=" . $controller . "&a=" . $action . "&msg=" . $encodingMsg;header($refresh);exit; }

前端

增加js代碼：

window.onload = function (){let msg = decodeURI(getQueryVariable("msg"));if(msg != "false"){let mainDiv = document.getElementById("mainDiv");mainDiv.insertAdjacentHTML("afterbegin", "<div id='alter' class='alert border rounded-3' role='alert'>" + msg + "</div>");} }

其中mainDiv是body后面的第一個(gè)div

還是這個(gè)頁面：

點(diǎn)擊登錄后：

?這樣的話，用戶體驗(yàn)會(huì)稍微高一點(diǎn)點(diǎn)。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的PHPJavaScript笔记-后端利用Refresh头带错误信息给前端（野路子操作）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。