AJAX-Implementierung eines Beispielcodes für eine einfache asynchrone Registrierungsseite

Der folgende Editor zeigt Ihnen einen einfachen Beispielcode für die AJAX-Implementierung Registrierungsseite für eine asynchrone Anforderung. Der Herausgeber findet es ziemlich gut, deshalb teile ich es jetzt mit Ihnen und gebe es als Referenz. Kommen Sie und schauen Sie sich den Editor an

Einführung in AJAX

(1)AJAX = Asynchronous 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 eine asynchrone Aktualisierung der Webseite 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, müssen sie die gesamte Webseite neu laden .

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 Netzwerkanfragen in PHP Daten, Überprüfung der Datenbank, um Urteile zu fällen, und Rückmeldung der Ergebnisse an das Frontend

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

Eine solche einfache Registrierungsschnittstelle wird mit AJAX implementiert

Das ist es. Der Editor hat Ihnen alle Codebeispiele für die AJAX-Implementierung einfacher asynchroner Anforderungen auf der Registrierungsseite bereitgestellt. Ich hoffe, Sie unterstützen Script Home~

Das obige ist der detaillierte Inhalt vonAJAX-Implementierung eines Beispielcodes für eine einfache asynchrone Registrierungsseite. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!