ホームページ ウェブフロントエンド jsチュートリアル Ajaxの基本とログイン手順を詳しく解説

Ajaxの基本とログイン手順を詳しく解説

Apr 02, 2018 am 11:29 AM
ajax ベース 詳しい説明

今回は、Ajax の基本とログイン手順について詳しく説明します。Ajax の基本とログインに関する 注意事項 とは何ですか? 実践的なケースを見てみましょう。

Ajax は、Asynchronous

JavaScript と 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 = &#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";
  }
?>
ログイン後にコピー
入力が間違っている場合は、このページに直接プロンプトが表示されます:

入力が正しければ、ジャンプします:

Ajax を使用してログインを記述する利点は、エラーが要求されたときに別のページにジャンプする必要がないことです。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

Ajax はページを更新せずにページング クエリを実装します

Ajax を使用してデータを削除し、詳細を表示する方法

以上がAjaxの基本とログイン手順を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Win11での管理者権限の取得について詳しく解説 Win11での管理者権限の取得について詳しく解説 Mar 08, 2024 pm 03:06 PM

Windows オペレーティング システムは世界で最も人気のあるオペレーティング システムの 1 つであり、その新バージョン Win11 が大きな注目を集めています。 Win11 システムでは、管理者権限の取得は重要な操作であり、管理者権限を取得すると、ユーザーはシステム上でより多くの操作や設定を実行できるようになります。この記事では、Win11システムで管理者権限を取得する方法と、権限を効果的に管理する方法を詳しく紹介します。 Win11 システムでは、管理者権限はローカル管理者とドメイン管理者の 2 種類に分かれています。ローカル管理者はローカル コンピュータに対する完全な管理権限を持っています

Oracle SQLの除算演算の詳細説明 Oracle SQLの除算演算の詳細説明 Mar 10, 2024 am 09:51 AM

OracleSQL の除算演算の詳細な説明 OracleSQL では、除算演算は一般的かつ重要な数学演算であり、2 つの数値を除算した結果を計算するために使用されます。除算はデータベース問合せでよく使用されるため、OracleSQL での除算演算とその使用法を理解することは、データベース開発者にとって重要なスキルの 1 つです。この記事では、OracleSQL の除算演算に関する関連知識を詳細に説明し、読者の参考となる具体的なコード例を示します。 1. OracleSQL での除算演算

jQuery AJAX リクエストで発生した 403 エラーを解決する方法 jQuery AJAX リクエストで発生した 403 エラーを解決する方法 Feb 20, 2024 am 10:07 AM

タイトル: jQuery AJAX リクエストの 403 エラーを解決する方法とコード例。403 エラーは、サーバーがリソースへのアクセスを禁止するリクエストを指します。このエラーは通常、リクエストにアクセス許可がないか、サーバーによって拒否されたために発生します。 jQueryAJAX リクエストを行うときにこのような状況に遭遇することがありますが、この記事ではこの問題の解決方法とコード例を紹介します。解決策: 権限を確認します。まず、要求された URL アドレスが正しいことを確認し、リソースにアクセスするための十分な権限があることを確認します。

jQuery AJAXリクエスト403エラーを解決する方法 jQuery AJAXリクエスト403エラーを解決する方法 Feb 19, 2024 pm 05:55 PM

jQuery は、クライアント側の開発を簡素化するために使用される人気のある JavaScript ライブラリです。 AJAX は、Web ページ全体をリロードせずに、非同期リクエストを送信し、サーバーと対話するテクノロジーです。ただし、jQuery を使用して AJAX リクエストを行うと、403 エラーが発生することがあります。 403 エラーは通常、セキュリティ ポリシーまたは権限の問題が原因で、サーバーによってアクセスが拒否されたエラーです。この記事では、jQueryAJAX リクエストで 403 エラーが発生した場合の解決方法について説明します。

PHPモジュロ演算子の役割と使い方を詳しく解説 PHPモジュロ演算子の役割と使い方を詳しく解説 Mar 19, 2024 pm 04:33 PM

PHP のモジュロ演算子 (%) は、2 つの数値を除算した余りを取得するために使用されます。この記事では、モジュロ演算子の役割と使用法について詳しく説明し、読者の理解を深めるために具体的なコード例を示します。 1. モジュロ演算子の役割 数学では、整数を別の整数で割ると、商と余りが得られます。たとえば、10 を 3 で割ると、商は 3 になり、余りは 1 になります。モジュロ演算子は、この剰余を取得するために使用されます。 2. モジュロ演算子の使用法 PHP では、% 記号を使用してモジュロを表します。

Linuxシステムコールsystem()関数の詳細説明 Linuxシステムコールsystem()関数の詳細説明 Feb 22, 2024 pm 08:21 PM

Linux システム コール system() 関数の詳細説明 システム コールは、Linux オペレーティング システムの非常に重要な部分であり、システム カーネルと対話する方法を提供します。その中でも、system()関数はよく使われるシステムコール関数の一つです。この記事では、system() 関数の使用法を詳しく紹介し、対応するコード例を示します。システム コールの基本概念 システム コールは、ユーザー プログラムがオペレーティング システム カーネルと対話する方法です。ユーザープログラムはシステムコール関数を呼び出してオペレーティングシステムを要求します。

jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? jQuery AJAX エラー 403 の問題を解決するにはどうすればよいですか? Feb 23, 2024 pm 04:27 PM

jQueryAJAX エラー 403 の問題を解決するにはどうすればよいですか? Web アプリケーションを開発する場合、非同期リクエストを送信するために jQuery がよく使用されます。ただし、jQueryAJAX の使用時に、サーバーによってアクセスが禁止されていることを示すエラー コード 403 が発生する場合があります。これは通常、サーバー側のセキュリティ設定が原因ですが、回避する方法があります。この記事では、jQueryAJAX エラー 403 の問題を解決する方法と具体的なコード例を紹介します。 1.作る

PHP と Ajax: オートコンプリート提案エンジンの構築 PHP と Ajax: オートコンプリート提案エンジンの構築 Jun 02, 2024 pm 08:39 PM

PHP と Ajax を使用してオートコンプリート候補エンジンを構築します。 サーバー側スクリプト: Ajax リクエストを処理し、候補を返します (autocomplete.php)。クライアント スクリプト: Ajax リクエストを送信し、提案を表示します (autocomplete.js)。実際のケース: HTML ページにスクリプトを組み込み、検索入力要素の識別子を指定します。

See all articles