Ajaxを使用してログインページを作成する方法-jsチュートリアル-php.cn

Ajaxを使用してログインページを作成する方法

php中世界最好的语言

リリース： 2018-04-02 10:53:10

オリジナル

2197 人が閲覧しました

今回は、ajax を使用してログインページを作成する方法と、ajax を使用してログインページを作成するための注意点について説明します。以下は実際的なケースです。見てみましょう。

AJAX の正式名称は、Asynchronous

JavaScript and XML (非同期 JavaScript および XML) です。

ajaxの利点:

1. 最大のポイントは、ページが更新されないこと、そしてユーザーエクスペリエンスが非常に良いことです。

2. より高速な応答機能を備えた非同期モードを使用してサーバーと通信します。
3. これまでサーバーに負担がかかっていた作業の一部をクライアントに転送することで、クライアントの空き容量を利用して処理することができ、サーバーと帯域幅の負担が軽減され、スペースとブロードバンドのレンタルコストが節約されます。また、サーバーの負担を軽減するために、ajax の原則は「オンデマンドでデータを取得する」ことで、冗長なリクエストと応答によるサーバーの負担を最小限に抑えることができます。
4. 標準化され広くサポートされているテクノロジーに基づいているため、プラグインや小さなプログラムをダウンロードする必要はありません。
5. Ajax を使用すると、インターネットアプリケーションをより小さく、より速く、より使いやすくすることができます。

ここでは、ajax を使用して簡単なログインページを作成します。最初に使用するのはデータベースログインテーブルです。

以下はログインページのコードです。まず、jquery パッケージを導入する必要があります

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>无标题文档</title>
 <script src="jquery-3.1.1.min.js"></script> /*引入jquery包*/
</head>
<body>
<h2>登录页面</h2>
<p>用户名：<input type="text" id="uid"/></p>
<p>密码：<input type="text" id="pwd"/></p>
<p><input type="button" id="btn"value="登录"/></p>11</body>12</html>

ログイン後にコピー

。ログインページは、これまでのブログで何度も書きましたが、とてもシンプルです

次に、ajaxの書き方です。

<script type="text/javascript">
$("#btn").click(function(){
 //第一步：取数据,这里用到了用户名和密码
 var uid=$("#uid").val();
 var pwd=$("#pwd").val();
 //第二步：验证数据，这里需要从数据库调数据，我们就用到了ajax
 $.ajax({
  url:"dlchuli.php",//请求地址
  data:{uid:uid,pwd:pwd},//提交的数据
  type:"POST",//提交的方式
  dataType:"TEXT", //返回类型 TEXT字符串 JSON XML
  success:function(data){
  //开始之前要去空格，用trim()
   if(data.trim()=="OK")
   {
    window.location.href = "main.php";
   }
   else{
    alert("用户名或者密码错误");
   }
  }
 })
})
</script>

ログイン後にコピー

dlchuli.phpのコードは以下のように記述します。

<?php
include("DADB.class.php");
$db=new DADB();
$uid=$_POST["uid"];
$pwd=$_POST["pwd"];
$sql="select password from login where username=&#39;{$uid}&#39;";
$arr=$db->Query($sql);
if($arr[0][0]=$pwd && !empty($pwd))
{
 echo"OK";
}
else{
 echo"NO";
}
?>

ログイン後にコピー

これを書くと、ajaxで書かれた簡単なログインページが完成します。最大の利点は、エラーが発生した場合に元のページでエラーが報告されることです。他のページにはジャンプしません。

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

推奨読書:

プロジェクトで Ajax リクエストを使用する方法

Ajax 操作でのユーザーセッションの失敗に対処する方法

以上がAjaxを使用してログインページを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。