Ajax の基本とログインのチュートリアル

亚连
リリース: 2018-05-22 15:56:19
オリジナル
1115 人が閲覧しました

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 = &#39;{$zhang}&#39;";
$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 = &#39;{$zhang}&#39;";
$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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!