Ajax的基礎與登入步驟詳解
這次帶給大家Ajax的基礎與登錄步奏詳解，Ajax的基礎與登錄注意事項有哪些，以下就是實戰案例，一起來看一下。
Ajax 是 Asynchronous JavaScript and XML的縮寫。
Ajax的優點：
優點：減輕伺服器的負擔,按需取資料,最大程度的減少冗餘請求
局部刷新頁面,減少用戶心理和實際的等待時間,帶來更好的用戶體驗
基於xml標準化,並被廣泛支持,不需安裝插件等
進一步促進頁面和資料的分離
Ajax包含下列技術：
基於web標準（standards-based presentation）XHTML+CSS的表示；
使用DOM（Document Object Model）進行動態顯示及互動；
使用XML 和XSLT 進行資料交換及相關操作；
使用XMLHttpRequest進行非同步資料查詢、檢索；
使用JavaScript 將所有的東西綁在一起。
也就是說Ajax最大的特點就是可以實現動態不刷新
#使用Ajax：
範例：
在資料庫中的一張表格：
實作點擊查看使用者名稱是否可用：
主頁碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
输入一个用户名：<input type="text" id="zhang" />
<span id="tishi"></span>
</body>
</html>
<script>
//给文本框加上事件
$("#zhang").blur(function(){
//1取内容
var zhang = $(this).val();
//val取到表单元素、给变量
//2将取到的内容内容区数据库验证
//调用Ajax
$.ajax({
type:"POST",
//提交方式
url:"chuli.php",
//请求哪一个php文件（请求地址）
data:{yhm:zhang},
//给zhang取名yhm，传过去，是一个json
//请求处理页面需不需要传数据过去，不需要传不用写
dataType:"TEXT",
//处理页面返回的类型:TEXT字符串 JSON,JSON，XML，只有三种类型
success:function(data){
//回调函数
// data为返回的值
//成功之后要调用的函数
if(data==0)
{
//如果为0
$("#tishi").text("该用户名为0；可用！");
$("#tishi").css("color","green");
}
else
{
$("#tishi").text("该用户名已存在；不可用！");
$("#tishi").css("color","brown");
}
}
});
//3给出提示
})
</script>接下來做處理頁面：
<?php
$zhang = $_POST["yhm"];
//取值
include("db.class.php");
$db = new db();
$sql = "select count(*) from mydb where zhang = '{$zhang}'";
$arr = $db->Query($sql);
echo $arr[0][0];
//直接输出相当于返回
?>圖：
輸入已存在使用者名稱：
輸入不存在的使用者名稱：
再來寫一個登入：
登入頁面的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<h1>登入页面</h1>
<p>帐号<input type="text" id="zhang"/></p>
<p>密码<input type="text" id="mi"/></p>
<input type="button" id="btn" value="登入"/>
</body>
</html>
<script>
$("#btn").click(function(){
//1取数据
var zhang = $("#zhang").val();
var mi = $("#mi").val();
//2验证数据
$.ajax({
url:"drcl.php",
data:{zhang:zhang,mi:mi},
type:"POST",
dataType:"TEXT",
success:function (data) {
//回调函数
//判断返回值
if(data=="ok")
{
window.location.href = "zym.php";
}
else
{
alert("用户名或密码错误");
}
}
});
//提示
})
</script>接下來是登入處理頁面：
<?php
include ("db.class.php");
$db = new db();
$zhang = $_POST["zhang"];
$mi = $_POST["mi"];
//取值
$sql = "select mi from mydb WHERE zhang = '{$zhang}'";
$arr = $db->Query($sql);
if($arr[0][0]==$mi && !empty($mi))
{
echo "ok";
}
else
{
echo "no";
}
?>來看圖，如果輸入的不對直接在本頁面提示：
#輸入的對就跳轉：
用Ajax寫登入的好處就是提示錯誤的時候不用跳到別的頁面。
相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#以上是Ajax的基礎與登入步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
Video Face Swap
使用我們完全免費的人工智慧換臉工具，輕鬆在任何影片中換臉！
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
Win11管理員權限取得詳解
Mar 08, 2024 pm 03:06 PM
Windows作業系統是全球最受歡迎的作業系統之一，其新版本Win11備受矚目。在Win11系統中，管理員權限的取得是一個重要的操作，管理員權限可以讓使用者對系統進行更多的操作和設定。本文將詳細介紹在Win11系統中如何取得管理員權限，以及如何有效地管理權限。在Win11系統中，管理員權限分為本機管理員和網域管理員兩種。本機管理員是指具有對本機電腦的完全管理權限
PHP 與 Ajax：建立一個自動完成建議引擎
Jun 02, 2024 pm 08:39 PM
使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。
Oracle SQL中的除法運算詳解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法運算詳解在OracleSQL中，除法運算是一種常見且重要的數學運算運算，用來計算兩個數相除的結果。除法在資料庫查詢中經常用到，因此了解OracleSQL中的除法運算及其用法是資料庫開發人員必備的技能之一。本文將詳細討論OracleSQL中除法運算的相關知識，並提供具體的程式碼範例供讀者參考。一、OracleSQL中的除法運算
解決jQuery AJAX請求遇到403錯誤的方法
Feb 20, 2024 am 10:07 AM
標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資
解決jQuery AJAX請求403錯誤的方法
Feb 19, 2024 pm 05:55 PM
jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤
如何解決jQuery AJAX報錯403的問題？
Feb 23, 2024 pm 04:27 PM
如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使
linux系統呼叫system()函數詳解
Feb 22, 2024 pm 08:21 PM
Linux系統呼叫system()函數詳解系統呼叫是Linux作業系統中非常重要的一部分，它提供了一種與系統核心互動的方式。其中，system()函數是常用的系統呼叫函數之一。本文將詳細介紹system()函數的使用方法，並提供對應的程式碼範例。系統呼叫的基本概念系統呼叫是使用者程式與作業系統核心互動的一種方式。使用者程式透過呼叫系統呼叫函數來請求作業系統
如何使用Ajax從PHP方法取得變數？
Mar 09, 2024 pm 05:36 PM
使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：
