今回は、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 を使用してログインを記述する利点は、エラーが要求されたときに別のページにジャンプする必要がないことです。
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:Ajax はページを更新せずにページング クエリを実装します
以上がAjaxの基本とログイン手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。