Implémentation AJAX d'un exemple de code de demande asynchrone de page d'inscription simple

L'éditeur suivant vous apportera une simple implémentation AJAX Page d'inscription exemple de code de demande asynchrone. L'éditeur le trouve plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence pour tout le monde. Suivons l'éditeur pour y jeter un œ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 une mise à jour asynchrone de la page Web. Cela signifie que certaines parties d'une page Web peuvent être mises à jour sans recharger la page entière.

(4) Si les pages Web traditionnelles (n'utilisant pas AJAX) doivent mettre à jour le contenu, elles doivent recharger la page Web entière.

Mise en page simple

JS juge d'abord et porte le jugement que le front-end peut faire, réduisant ainsi 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:请输入正确的邮箱格式');
      }

Utiliser 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);
          }
        });
      }
      })

Accepter les requêtes réseau en php Données, vérifiez la base de données pour porter des jugements et renvoyez les résultats au front-end

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

Une interface d'enregistrement aussi simple est implémentée à l'aide d'AJAX

Ça y est L'éditeur vous a apporté tous les exemples de code pour l'implémentation AJAX de requêtes asynchrones simples sur la page d'inscription. J'espère que vous prendrez en charge Script Home~

.

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!