Implémentation de la méthode de requête asynchrone de la page d'inscription AJAX

Cette fois, je vous présente l'implémentation de la méthode de requête asynchrone de l'AJAXPage d'enregistrement Quelles sont les Notes pour l'implémentation de la Méthode de requête de la page d'enregistrement AJAX, comme suit. Il s'agit d'un cas pratique, jetons-y un coup d'œil.

Introduction à AJAX

(1)AJAX =

JavaScript asynchrone et XML.

(2)AJAX est une technologie utilisée pour créer des pages Web dynamiques et rapides.

(3) En échangeant une petite quantité de données avec le serveur en arrière-plan, AJAX peut permettre des mises à jour asynchrones des pages Web. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

(4) Si des pages Web traditionnelles (n'utilisant pas AJAX) doivent mettre à jour le contenu, la page Web entière doit être rechargée.

Mise en page simple

JS juge d'abord et porte le jugement que le front-end peut faire pour réduire l'interaction du serveur

$('button').on('click',function(){;
      var booluser = $('#data input')[0].value.length >= 8;
      var   boolpwd = $('#data input')[1].value.length >= 6 ;
      var boolpwd1 = $('#data input')[1].value == $('#data input')[2].value ;
      var retel =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/g; 
      var booltel = retel.test($('#data input')[3].value);
      var reemail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/g ;
      var boolemail = reemail.test($('#data input')[4].value);
      //这里应该嵌套使if的,但是不是实际开发,这么写便于代码观看
      if(!booluser){
        console.log('user:不能少于8位');
      }
      if(!boolpwd){
        console.log('pwd:不能少于6位');
      }
      if(!boolpwd1){
        console.log('pwd1:两次输入密码不一致');
      }
      if(!booltel){
        console.log('tel:请输入正确的电话号');
      }
      if(!boolemail){
        console.log('email:请输入正确的邮箱格式');
      }

Utilisez ajax pour effectuer des requêtes asynchrones

if(booluser && boolpwd && boolpwd1 && booltel && boolemail){        
        $.ajax({
          type:"get",
         
          url:"reg.php",
          async:true,
          data:{
            user:$('#data input')[0].value,
            pwd:$('#data input')[1].value,
            tel:$('#data input')[3].value,
            email:$('#data input')[4].value
          },
          success : function(data){
            console.log(data);
          }
        });
      }
      })

Acceptez les données de la requête réseau en php, vérifiez la base de données pour porter des jugements et renvoyez les résultats à la section précédente

<?php
var_dump($_GET);
$user = $_GET[&#39;user&#39;];
$pwd = $_GET[&#39;pwd&#39;];
$tel = $_GET[&#39;tel&#39;];
$email = $_GET[&#39;email&#39;];
$msg = &#39;&#39;;
header(&#39;Content-type:text/html;charset=utf8&#39;);
  $adders = "mysql:host=localhost;dbname=Users;";
  $db = new PDO($adders,"root");
  $db->exec('set names utf8');
  //链接数据库,创建表
  $result = $db->exec('create table if not exists ajaxreg(user varchar(100) 
     primary key,pwd varchar(100),tel varchar(30),email varchar(30)) 
     default charset=utf8');
  $resulttel = $db->query("select tel from ajaxreg ");
  $resulttel->setFetchMode(PDO::FETCH_ASSOC);
  $arr = $resulttel->fetchAll();
 
  foreach($arr as $ar){
    if( $ar['tel'] == $tel){
      $msg = "您输入的手机号已经存在";
     echo $msg;
    //如果手机号已存在,终止整个程序
    die();
    }
  }
     //如果手机号不存在执行下面代码
     $result = $db->exec("insert into ajaxreg values(
     '$user','$pwd','$tel','$email')");
     if($result){
      $msg = "注册成功";
     }else{
     $msg = "用户名已存在";
     }
  echo $msg;
 $db->close();
?>

Une interface d'enregistrement aussi simple est implémentée en utilisant AJAX

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez faire attention. vers d'autres articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Ajax implémente le processus complet d'enregistrement d'un nom d'utilisateur

Comment implémenter la boucle Ajax 🎜>

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!