AJAX implements simple registration page asynchronous request instance code, ajax instance

AJAX implements simple registration page asynchronous request instance code, ajax instance

AJAX Introduction

(1) AJAX = Asynchronous JavaScript and XML.

(2) AJAX is a technology used to create fast dynamic web pages.

(3) by performing a small amount of data exchange with the server in the background, AJAX can implement asynchronous updates on webpages. This means that you can update a part of a webpage without reloading the entire webpage.

(4) If you need to update the content of a traditional web page (without AJAX), you must reload the entire web page.

Simple Layout

JS judges the front-end and reduces server interaction.

$ ('Click '). 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); // nested here should make if, but it is not actually developed, so it is easy for the code to view if (! Booluser) {console. log ('user: cannot be less than 8 bits);} if (! Boolpwd) {console. log ('pwd: cannot be less than 6 bits);} if (! Boolpwd1) {console. log ('pwd1: two passwords inconsistent ');} if (! Booltel) {console. log ('tel: enter the correct phone number ');} if (! Boolemail) {console. log ('email: enter the correct email format ');}

Asynchronous requests using 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 transmitted from network requests in php, view the database for judgment, and feedback the results to the previous section.

<? Phpvar_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 to the database, create a table $ 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 = "the mobile phone number you entered already exists"; echo $ msg; // If the mobile phone number already exists, terminate the whole program die ();}} // If the mobile phone number does not exist, run the following code $ result = $ db-> exec ("insert into ajaxreg values ('$ user',' $ pwd', '$ tel ', '$ email') "); if ($ result) {$ msg = "Registered successfully";} else {$ msg = "the user name already exists";} echo $ msg; $ db-> close ();?>

This simple registration interface is implemented using AJAX.

The above is all the content of the AJAX implementation simple registration page asynchronous request instance Code provided by xiaobian for everyone. I hope you can support more help ~