Maison > Article > développement back-end > Comment écrire une connexion en utilisant ajax

Comment écrire une connexion en utilisant ajax

高洛峰original: 2017-03-12 10:13:461530parcourir

Cet article présente comment utiliser ajax pour écrire la connexion

Le nom complet d'AJAX est Asynchronous JavaScript et XML (JavaScript et XML asynchrones).

Avantages d'ajax :

1. Le plus gros point est que la page ne s'actualise pas, et l'expérience utilisateur est très bonne.
　2. Utilisez le mode asynchrone pour communiquer avec le serveur de service , avec une capacité de réponse plus rapide. .
3. Vous pouvez transférer une partie du travail précédemment chargé par le serveur vers le client, en utilisant la capacité inactive du client pour le traiter, en réduisant la charge sur le serveur et la bande passante, et en économisant de l'espace et des coûts de location du haut débit. Et pour réduire la charge sur le serveur, le principe d'ajax est de « récupérer les données à la demande », ce qui peut minimiser la charge sur le serveur causée par les requêtes et réponses redondantes.
4. Basé sur une technologie standardisée et largement prise en charge, il n'est pas nécessaire de télécharger des plug-ins ou de petits programmes.
　5. Ajax peut rendre les applications Internet plus petites, plus rapides et plus conviviales.

Ici, j'utilise ajax pour écrire une page de connexion simple : La première chose utilisée est la table de connexion à la base de données Comment écrire une connexion en utilisant ajax

Ce qui suit est le code de la page de connexion. >jquery doit être introduit Package

<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>

La page de connexion est très simple, je ne montrerai donc pas l'image dont j'ai parlé plusieurs fois dans les blogs précédents

. Ensuite, voici comment écrire en 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>

Le code pour dlchuli.php est écrit comme suit :

<?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";
}
?>

Après avoir écrit ceci, une simple page de connexion écrite avec ajax est complétée . Le plus gros avantage est que si une erreur se produit, une erreur sera signalée sur la page d'origine et ne passera pas à d'autres pages

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Analyse des trois domaines du découplage PHP (une brève discussion sur les conteneurs de services)Article suivant：Analyse des trois domaines du découplage PHP (une brève discussion sur les conteneurs de services)

Articles Liés

Voir plus