基於ThinkPHP3.23的簡單ajax登陸案例

阿新 • • 發佈：2019-01-24

本文將給小夥伴們做一個基於ThinkPHP3.2.的簡單ajax登陸demo。閒話不多說。直接進入正文吧。

可能有些小夥伴認為TP自帶的跳轉頁面挺好，但是站在網站安全的角度來說，我們不應該讓會員看到任何錯誤資訊，或者可以暴露網站服務端資訊的內容。TP的那個跳轉頁面太經典了。稍微瞭解框架的人看到那個頁面，就知道你的網站是基於哪個框架構建的了。然後就對症下藥開始找你站上的漏洞了。

在TP官網的討論區看到不少小夥伴在使用TP3.2的ajax的時候遇到各種小問題，嘗試著回答了幾個，但是力不從心，發帖的人實在是有點多，所以呢，就簡單的寫一個demo吧。希望對小夥伴們有幫助。

這裡,我們以TP3.23完整版為例，只修改'URL_MODE'為重寫模式(完全是個人習慣,勿噴

)，其他的保持預設即可。

第一步:我們先建立一個控制器:LoginController.class.php並定義檢視。

namespace Home\Controller;
	use Think\Controller;

	class LoginController extends Controller{

		public function  index(){

			$this->display();
		}
	}

第二步:建立檢視檔案View/Login/index.html。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Ajax登陸演示</title>
	<script src="http://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
</head>
<body>
<<fieldset>
	<legend>登陸演示表單</legend>
	<input type="text" name="uname" id="uname"><br>
	<input type="password" name="upwd" id="upwd"><br>
	<input type="submit" value="登陸" id="checkLogin">
</fieldset>
</body> 
</html>

不知道大家注意到沒有,我並沒有寫<form>標籤，由於我們是ajax提交，所以這裡的<form>標籤留空，提交地址可以通過javascript指定。

第三步:接下來我們需要通過js做一個簡單的表單驗證，然後通過ajax提交到指定的url地址，並且通過接收返回來的值而執行不同的操作，具體程式碼如下，必要的地方我都有註釋哦。

<script type="text/javascript">
	$(function(){
		$('#checkLogin').click(function(){
			var $unameVal = $.trim($('#uname').val());
			var $upwdVal = $.trim($('#upwd').val());
			//如果沒有填寫資料,則直接返回false.不執行ajax提交操作
			if($unameVal == '' || $upwdVal == ''){
				alert('請輸入使用者民和密碼');
				return false;
			}
			/*
				$.post(url,parameters,callback);
				url : post提交的伺服器端資源地址。
				parameters: 需要傳遞到伺服器端的引數。 引數形式為“鍵/值”。
				callback : 在請求完成時被呼叫,這裡我們通過$data來接收伺服器返回的資料  
			 */
			$.post('{:U('Login/checkLogin')}', {uname : $unameVal,upwd : $upwdVal},function($data) {
				alert($data.info);
				if($data.status == 1){
					location.href = $data.url; 
				}else{
					$('#uname').reset();
					$('#upwd').reset();
				}	
			});
		});
	});
</script>

第四步:我們在LoginController.class.php中定義一個方法checkLogin()方法用來處理post過來的資料,並返回。

/*
* @param $uname string 接收到的使用者名稱
* @param $upwd string 接收到的密碼
* @return $data array 驗證結果
* @author uctoo<[email protected]>
*/
public function checkLogin($uname,$upwd){
	$data = array();
	if(!empty($uname) && !empty($upwd)){
	//1.這裡的業務邏輯,小夥伴們自由發揮.我呢就簡單的處理一下.只要接收到資料不為空,就表示成功.
	//2.如果你覺得拼裝陣列比較麻煩,那麼你可以將$this->success()或者$this->error中的第三個引數定義為true,即可返回json資料.例如:$this->success('登陸成功',U('User/index'),true).
	//3.我個人傾向於拼裝陣列,主要原因是自己拼裝的陣列資料結構比較明瞭,方便閱讀.
		$data['status'] = 1;
		$data['info'] = '登陸成功';
		$data['url'] = U('User/index');			
	}else{
		$data['status'] = 0;
		$data['info'] = '使用者名稱和密碼不能為空';
		$data['url'] = U('Login/index');
	}
	//通過ajaxReturn()方法返回我們之前生成的陣列
	$this->ajaxReturn($data);
}

附效果圖一張:

好啦,盡情折騰吧。

基於ThinkPHP3.23的簡單ajax登陸案例

本文將給小夥伴們做一個基於ThinkPHP3.2.的簡單ajax登陸demo。閒話不多說。直接進入正文吧。可能有些小夥伴認為TP自帶的跳轉頁面挺好，但是站在網站安全的角度來說，我們不應該讓會員看到任何錯誤資訊，或者可以暴露網站服務端資訊的內容。TP的那個跳轉頁面太經典了

個基於TensorFlow的簡單故事生成案例：帶你了解LSTM

return 下一個 ann ever 是否 tin 深度創作概率 https://medium.com/towards-data-science/lstm-by-example-using-tensorflow-feb0c1968537 在深度學習中，循環神經網絡

基於註解的簡單SSH保存用戶小案例

trac 效果 web.xml配置配置記錄 .org rate enc bean def 需求：搭建SSH框架環境，使用註解進行相關的註入（實體類的註解，AOP註解、DI註入），保存用戶信息效果：一、導依賴包二、項目的目錄結構三、web.xml配置 1

JavaWeb筆記-23-ajax請求案例---省市聯動

省市聯動 1. 頁面 <select name="province"> <option>===請選擇省份===</option> </select> <select name="city"> &l

netty03(基於4.1.23.Final 版本的案例)

基於前面的netty01和netty02修改一下版本，可以點進去的將maven依賴版本改了一下 <!-- netty版本：netty-5.0.0.Alpha2 http://files.cnblogs.com/files/applerosa/net

HTML+CSS簡單的登陸+註冊介面仿照案例（一）

是新手在練習html+css，所以裡面的很多程式碼會比較冗雜，不是很簡潔，會慢慢提高水平的。1.整體介面分為三大部分：導航、主要內容、尾部資訊內容；主要內容細分為：左側欄（頁面資訊部分）、右側欄（登陸板塊）2.導航：裡面有四個li標籤,每個li標籤裡面都有一個a標籤，讓其右浮

簡單AJAX請求JSon數據

異步處理 xmlhttp enc public color span left exp lis Ajax 全名為Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。它是一種在無需重新加載整個網頁的情況下，能夠更新部分

基於sendEmail的簡單zabbix郵件報警

his images top afr .tar.gz 編寫 false end image 一.sendmail和sendEmail區別 sendmail是一款郵件服務器軟件，sendEmail是命令行SMTP郵件客戶端二.senEmail安裝下載地址：http:

中篇： php 微信支付基於Thinkphp3.2開發

onf .cn main 回調 eip font 由於 lib ora ⑤　微信支付接口的使用 a.微信公眾平臺文檔:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 b.微信支付

2017.9.24 基於HTML+JavaScript+CSS的開發案例&&JavaScript+CSS+DIV實現表格變色

菜單 dex ear 位置下層定義 -s html 頂部 1.JavaScript+CSS+DIV實現下拉菜單　　1.1 層標簽<div> 基本語法：　　<div id="層編號" style="position:absoult;left:29px

基於LNMP的簡單電商網站架構

linux 運維一：實驗環境centos 7 實驗機chrome 瀏覽器二：實驗步驟※註意事項實驗前，查看80端口是否被httpd服務占用，如打開，則關閉httpd服務，確保80端口未開啟1.安裝必要軟件yum install mariadb mariadb-server php-fpm php p

簡單的Session案例 —— 一次性驗證碼

exception value ttr app abc [] gre dom 數字一次性驗證碼的主要目的就是為了限制人們利用工具軟件來暴力猜測密碼，其原理與利用Session防止表單重復提交的原理基本一樣，只是將表單標識號變成了驗證碼的形式，並且要求用戶將提示的驗證碼

Java實驗--基於Swing的簡單的歌曲信息管理系統（三）

img dbo check clas str http 按鈕 cancel uuid 轉載請註明出處，上一篇《Java實驗--基於Swing的簡單的歌曲信息管理系統（二）》介紹了項目的目錄結構和Dao層，本篇主要講解界面的繪制和業務層Service。登錄界面　　登錄

07_android入門_採用HttpClient的POST方式、GET方式分別實現登陸案例

ise avi ack 集合新的 -h one less mes 1.簡單介紹 HttpClient 是 Apache Jakarta Common 下的子項目，能夠用來提供高效的、最新的、功能豐富的支持 HTTP 協議

TF之RNN：matplotlib動態演示之基於順序的RNN回歸案例實現高效學習逐步逼近余弦曲線—Jason niu

hold batch main 技術分享 1.0 dict asi itl plot import tensorflow as tf import numpy as np import matplotlib.pyplot as plt BATCH_START = 0

bootstrap 一個簡單的登陸頁面

window tran 修改 min tle mar text ace rap 效果如圖：用bootstrap 寫的一個簡單的登陸一、修改樣式樣式可以自己調整，例如換個背景色之類的，修改 background-color屬性就可以 #from

python django學習一：簡單註冊/登陸/session

rfi bmi ews exception eth mar %u objects 未使用註冊登陸 session user.html 未使用{{useform}}而使用{{ userform.password }}形式便於後期css樣式 <!DOCTYPE htm

tkinter做一個簡單的登陸頁面

簡單 ble command inpu pre color right lac png 做一個簡單的登陸頁面 1 import tkinter 2 3 wuya = tkinter.Tk() 4 wuya.title("wuya") 5 wuya.geomet

自己寫的基於bootstrap的簡單分頁插件

自己寫的基於bootstrap的簡單分頁<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>

windows ---Xshell工具基於證書的免密登陸linux系統（補充說明）

Windows linux Xshell 證書登陸原文：https://blog.csdn.net/adminabcd/article/details/51372982 （這裏寫的很詳細了，我只做些補充） 1.關於配置完成後老是提示（所選用戶秘鑰未在遠程主機上註冊，請再試一次。）你打多了

基於ThinkPHP3.23的簡單ajax登陸案例

相關推薦