BinaryDevelop
  1. ホーム
  2. Web プログラミング
  3. AJAX関連

シンプルなログインページのためのajax

2022-01-15 20:19:10

この例では、参考のため、シンプルなログインページを実現するためのajaxの具体的なコードを以下のように共有します。

I. ajaxとは何ですか？

Ajaxとは、ページ全体を再読み込みすることなく、Webページの一部を更新することができる技術です。

II. ajaxの仕組み

Ajaxは、ページ上の指定した場所に他のページの出力内容をすべて読み込むことができるという原理で動作するため、静的なページでもデータベースから返送データの情報を取得することができます。つまりAjaxは、静的なページがページ全体を更新することなくサーバーと通信することを可能にし、ユーザーの待ち時間を短縮しながらネットワークトラフィックを減らし、顧客体験の親しみやすさを向上させることができるのです。

III. ajaxで簡単なログインページを実装する

1.ajax_login.html 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title> login page</title>
 <style>
  .div1{
   display: none;
   color: red;
  }
 </style>
 <script src="/static/js/jquery-1.12.4.min.js"></script>
 <script>
  $(function () {

   $('#register').click(function () {
    // alert('ok');
    // Get username and password:
    username = $('#username').val();
    password = $('#password').val();
    rember = $('#rember').val();
    // alert(rember);
    $.ajax({
     url:"/login_ajax_check",
     type:"POST", // submit method
     data:{"username":username,"password":password,"rember":rember},
     dataType:"json",
     
    }).done(function (data) {
     if (data.res==1){
      // alert('username')
      location.href="/index" rel="external nofollow" 

     }else{
      // alert('username');
      $('.div1').show().html('Username or password input error')

     }
    })
   });
  });
 </script>
</head>
<body>
 <div>
  Username:<input type="text" id="username" ><br/>
  Remember username:<input type="checkbox" id="rember"><br/>
  password<input type="password" id="password"><br/>
  <input type="submit" value="login" id="register">
  <div class="div1"></div>
 </div>
</body>
</html>

2.views.py 

from django.http import HttpResponse,JsonResponse

def login_ajax(request):
 """ajax login page"""
 return render(request,"booktest/login_ajax.html")

def login_ajax_check(request):
 """ajax login check"""
 username = request.POST.get('username') # get the data by the key 'username'
 password = request.POST.get('password')


 # If the login is correct
 if username == "admin" and password == "12":
  jsonresponse = JsonResponse({"res":1})

  return jsonresponse

 # Login error:
 else:
  return JsonResponse({"res":0})

以上がこの記事の内容です。皆様の学習のお役に立てれば幸いです。また、BinaryDevelopをより支持していただけると幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します