ホームページ >ウェブフロントエンド >jsチュートリアル >Ajaxの基本とログイン手順を詳しく解説
Ajaxの基本とログイン手順を詳しく解説
- php中世界最好的语言オリジナル
- 2018-04-02 11:29:101301ブラウズ
今回は、Ajax の基本とログイン手順について詳しく説明します。Ajax の基本とログインに関する 注意事項 とは何ですか? 実践的なケースを見てみましょう。
Ajax は、AsynchronousJavaScript と XML の略称です。
Ajaxの利点:
利点:サーバーの負担を軽減し、オンデマンドでデータを取得し、冗長なリクエストを最小限に抑えますページを部分的に更新し、ユーザーの心理と実際の待ち時間を軽減し、より良い結果をもたらしますユーザーエクスペリエンス は XML 標準化に基づいており、プラグインなどをインストールする必要がなく、広くサポートされています ページとデータの分離をさらに促進しますAjax には次のテクノロジーが含まれています:
ベースWeb 標準 (標準ベースのプレゼンテーション) の表現。 動的表示と対話には DOM (Document オブジェクト モデル) を使用します。
データ交換と関連操作には 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 を使用してログインを記述する利点は、エラーが要求されたときに別のページにジャンプする必要がないことです。 
Ajax はページを更新せずにページング クエリを実装します
以上がAjaxの基本とログイン手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。