Ajax implementation of Simple registration page asynchronous request instance code _ajax related

Introduction to Ajax

(1) AJAX = asynchronous JavaScript and XML.

(2) AJAX is a technique for creating fast-moving web pages.

(3) in the background and the server for a small amount of data exchange, AJAX can make the Web page to implement asynchronous update. This means you can update portions of a Web page without reloading the entire page.

(4) Traditional Web pages (without AJAX) if you need to update the content, you must overload the entire page surface.

Simple layout

JS first judge, the front-end can be judged to do, reduce the server's interaction

$ (' 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);
      This should be nested to make if, but not actually developed, so that the code can be written to see
      if (!booluser) {
        console.log (' User: not less than 8 bits ');
      }
      if (!boolpwd) {
        console.log (' pwd: cannot be less than 6 bits ');
      }
      if (!BOOLPWD1) {
        console.log (' PWD1: two times input password inconsistent ');
      }
      if (!booltel) {
        Console.log (' Tel: Please enter the correct phone number ');
      }
      if (!boolemail) {
        console.log (' Email: Please enter the correct mailbox format ');
      }

Making asynchronous requests with Ajax

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

Accept the data from the network request in PHP, view the database to make a judgment, and feedback the result to the previous paragraph.

<?php Var_dump ($_get);
$user = $_get[' user '];
$pwd = $_get[' pwd '];
$tel = $_get[' Tel '];
$email = $_get[' email '];
$msg = ';
  Header (' Content-type:text/html;charset=utf8 ');
  $adders = "mysql:host=localhost;dbname=users;";
  $db = new PDO ($adders, "root");
  $db->exec (' Set names UTF8 '); Link database, create table $result = $db->exec (' CREATE table if not exists ajaxreg (user varchar primary key,pwd varchar (1
  , tel varchar (), email varchar ()) 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 = "The phone number you entered already exists";
    Echo $msg;
    If the phone number already exists, terminate the entire program die (); }//If the cell phone number does not exist execute the following code $result = $db->exec ("INSERT into ajaxreg values (' $user ', ' $pwd ', ' $tel ', ' $email ')"
     );
     if ($result) {$msg = "registered successfully";
     }else{$msg = "User name already exists";
 Echo $msg;
$db->close ();?> 

Such a simple registration interface is implemented with Ajax

The above is small series for everyone to bring the AJAX implementation of Simple registration page asynchronous request instance code all content, I hope that we support cloud Habitat Community ~