Explication détaillée de l'implémentation ajax de la page de connexion simple-js tutoriel-php.cn

Explication détaillée de l'implémentation ajax de la page de connexion simple

coldplay.xixi

Libérer： 2020-08-19 10:06:04

avant

2393 Les gens l'ont consulté

Explication détaillée de l'implémentation ajax de la page de connexion simple

L'exemple de cet article partage le code spécifique pour ajax pour implémenter une page de connexion simple pour votre référence. Le contenu spécifique est le suivant

[Articles connexes recommandés : Tutoriel vidéo ajax ]

1. Qu'est-ce qu'ajax

Ajax est une technologie qui permet de mettre à jour une partie d'une page Web sans recharger l'intégralité du Web. page.

2. Le principe de fonctionnement d'ajax

Le principe de fonctionnement d'Ajax est que l'emplacement spécifié d'une page peut charger tout le contenu de sortie d'une autre page, réalisant ainsi une page statique Vous pouvez également obtenir les informations sur les données renvoyées à partir de la base de données. Par conséquent, Ajax implémente une page Web statique pour communiquer avec le serveur sans actualiser la page entière, réduisant ainsi le temps d'attente des utilisateurs, réduisant le trafic réseau et améliorant la convivialité de l'expérience client.

3. Utilisez ajax pour implémenter une page de connexion simple

1.ajax_login.html

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

   $(&#39;#register&#39;).click(function () {
    // alert(&#39;ok&#39;);
    //获取用户名和密码:
    username = $(&#39;#username&#39;).val();
    password = $(&#39;#password&#39;).val();
    rember = $(&#39;#rember&#39;).val();
    // alert(rember);
    $.ajax({
     url:"/login_ajax_check",
     type:"POST", //提交方式
     data:{"username":username,"password":password,"rember":rember},
     dataType:"json",
     
    }).done(function (data) {
     if (data.res==1){
      // alert(&#39;username&#39;)
      location.href="/index" rel="external nofollow" 

     }else{
      // alert(&#39;username&#39;);
      $(&#39;.p1&#39;).show().html(&#39;用户名或密码输入错误&#39;)

     }
    })
   });
  });
 </script>
</head>
<body>
 <p>
  用户名:<input type="text" id="username" ><br/>
  记住用户名:<input type="checkbox" id="rember"><br/>
  密码<input type="password" id="password"><br/>
  <input type="submit" value="登录" id="register">
  <p class="p1"></p>
 </p>
</body>
</html>

Copier après la connexion

2.views.py

from django.http import HttpResponse,JsonResponse

def login_ajax(request):
 """ajax登录页面"""
 return render(request,"booktest/login_ajax.html")

def login_ajax_check(request):
 """ajax登录校验"""
 username = request.POST.get(&#39;username&#39;) # 通过&#39;username&#39;这个键拿到数据
 password = request.POST.get(&#39;password&#39;)


 #若登录正确
 if username == "admin" and password == "12":
  jsonresponse = JsonResponse({"res":1})

  return jsonresponse

 #登录错误:
 else:
  return JsonResponse({"res":0})

Copier après la connexion