Implementierung der asynchronen Anforderungsmethode der AJAX-Registrierungsseite

Dieses Mal präsentiere ich Ihnen die Implementierung der asynchronen Anforderungsmethode der AJAXRegistrierungsseite Was sind die Hinweise für die Implementierung der asynchronen Anforderungsmethode der AJAX-Registrierungsseite, wie folgt. Dies ist ein praktischer Fall, schauen wir uns ihn an.

Einführung in AJAX

(1)AJAX = Asynchrones JavaScript und XML.

(2)AJAX ist eine Technologie zur Erstellung schneller dynamischer Webseiten.

(3) Durch den Austausch einer kleinen Datenmenge mit dem Server im Hintergrund kann AJAX asynchrone Aktualisierungen von Webseiten ermöglichen. Das bedeutet, dass Teile einer Webseite aktualisiert werden können, ohne dass die gesamte Seite neu geladen werden muss.

(4) Wenn herkömmliche Webseiten (ohne AJAX) Inhalte aktualisieren müssen, muss die gesamte Webseite neu geladen werden.

Einfaches Layout

JS beurteilt zuerst und trifft das Urteil, das das Frontend treffen kann, um die Serverinteraktion zu reduzieren

$('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:请输入正确的邮箱格式');
      }

Verwenden Sie Ajax, um asynchrone Anfragen zu stellen

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

Akzeptieren Sie die Daten aus der Netzwerkanfrage in PHP, überprüfen Sie die Datenbank, um Urteile zu fällen, und geben Sie die Ergebnisse zurück der vorherige Abschnitt

<?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();
?>

Eine solche einfache Registrierungsschnittstelle wird mit AJAX implementiert

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben, achten Sie bitte darauf zu anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ajax implementiert den gesamten Prozess der Registrierung eines Benutzernamens

So implementieren Sie die Ajax-Schleife

Das obige ist der detaillierte Inhalt vonImplementierung der asynchronen Anforderungsmethode der AJAX-Registrierungsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!