AJAX implements simple asynchronous page request registration and asynchronous ajax page request registration.

AJAX implements simple asynchronous page request registration and asynchronous ajax page request registration.
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 and 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 =" username already exists ";} echo $ msg; $ db-> close ();?>

This simple registration interface is implemented using AJAX.