Ajax は、Asynchronous JavaScript and XML の略称です。その利点により、サーバーの負担が軽減され、オンデマンドでデータを取得し、冗長なリクエストを最小限に抑えることができます。次に、この記事を通じてAjaxの基本とログインチュートリアルを紹介しますので、必要な友達は参考にしてください
AjaxはAsynchronous JavaScript and XMLの略です。
Ajaxの利点:
利点:サーバーの負担を軽減し、オンデマンドでデータを取得し、冗長なリクエストを最小限に抑えます
ページを部分的に更新し、ユーザーの心理と実際の待ち時間を軽減し、より良い結果をもたらしますユーザーエクスペリエンス
は XML 標準化に基づいており、プラグインなどをインストールする必要がなく、広くサポートされています
ページとデータの分離をさらに促進します
Ajax には次のテクノロジーが含まれています:
ベースWeb 標準 (標準ベースのプレゼンテーション) の表現。
動的表示と対話には DOM (ドキュメント オブジェクト モデル) を使用します。
非同期データには 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"; } ?>
画像を見てください。入力が間違っている場合は、ここに直接入力してください。 ページのヒント:
入力されたペアは次の場所にジャンプします:
上記は、皆さんのお役に立てれば幸いです。未来のみんなへ。
関連記事:
jquery でクロスドメインajax を処理する 3 つの主な方法 (グラフィック チュートリアル)
ajax の実装 (グラフィック チュートリアル)
ajax で contentType: "application/json" を設定する役割 (写真とテキストのチュートリアル)
以上がAjax の基本とログインのチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。