溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關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>
<h2>登入頁面</h2>
<div>帳號<input type="text" id="zhang"/></div>
<div>密碼<input type="text" id="mi"/></div>
<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寫登入的好處就是提示錯誤的時候不用跳到別的頁面。
關于“Ajax基礎與登入的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
