Using PHP and Ajax to interact with front and back data--user login as an example

Many websites have the user login system, to complete the user registration and landing, it is necessary to use the data interaction between the front and back. Here is a simple user registration and login as an example to introduce the approximate process of front and rear interaction.

First, let's make a simple landing interface.

Here for convenience I use the bootstrap plugin

<formclass= "Form-horizontal">    <Divclass= "Form-group">        <label>User name</label>        <inputtype= "text"class= "Form-control"name= "UserName"/>    </Div>    <Divclass= "Form-group">        <label>Password</label>        <inputtype= "Password"class= "Form-control"name= "pwd"/>    </Div>    <Divclass= "Form-group btns">        <inputtype= "button"class= "Btn btn-primary"value= "Login System"ID= "Submit"/>        &nbsp;&nbsp;&nbsp;&nbsp;        <atype= "button"class= "Btn btn-success"href= "reg.php"/>Registered Account</a>    </Div></form>

First do a registration function, click on the registered account to jump to the registered page. The registered page is similar to the login page, click Back to login to return to the login page.

Add name to several input

<inputtype= "text"class= "Form-control"name= "UserName"/><inputtype= "Password"class= "Form-control"name= "pwd" /><inputtype= "Password"class= "Form-control"name= "Repwd" /><inputtype= "button"class= "Btn btn-primary"value= "OK Registration"ID= "Submit"/>

Next start to write the JS code, click on the registration button to trigger the Click event.

1. We will convert the information passed by the form form through serialize () to a string.

2, through post () to submit data to the background processing, the first parameter is the submitted file, the second parameter is the data passed, here we write as an object form.

$ (function() {    $ ("#submit"). On ("click",function() {        var str = $ ("form"). Serialize ();        $.post ("doreg.php", {"FormData": str},function(data) {            if(data== "true") {                alert ("registered successfully!) Going to jump landing page! ");                 = "login.php";            } Else {                alert ("Registration failed! Because what I don't know! ");            }        });    });});

Then we go to the background script

1. The data to be received is "[;]" Separated so that we could then separate the strings.

$str $_post ["FormData"]. " [;]";

2, here we first write the data to a TXT file, return the length of the new field, later can save the data to the database.

$num file_put_contents $str, file_append);

3, then send a data to the foreground, when the $num>0 description file written content.

if ($num>0) {    echo "true";} Else {    echo "false";}

This allows us to complete a simple front-and-back data interaction.

We can go back to the landing page when we have completed the registration.

The JS code on the landing page is also class-like

$ (function() {    $ ("#submit"). On ("click",function() {        var str = $ ("form"). Serialize ();        $. Post ("dologin.php", {"FormData": str},function(data) {            if(data== " True ") {                =" index.php? " Name= "+$ (" Input[name= ' UserName '] "). Val ();            } Else {                alert ("User name or password Error!!!") ");            }        });    });});

And then we'll do the background operation.

1, first to take the data from the front desk

$str $_post ["FormData"];

2, then the received data according to the "&" symbol to separate, because we deposited the data are in the middle of the & separated, and finally to [;] End

The use of list () is to assign different variables to the strings of each segment after separation.

List ($userNameexplode$str); List (,$pwdexplode$str);

3. Then we have to take the file to save the data

$users file_get_contents ("User.txt");

4. Then distinguish each user, this time we use [;] Separated

$USERARR Explode $users);

5, and then enter the login information is not the same as the registration of the user information in our files, consistent instructions entered the correct information, you can end the script and return true to the foreground

foreach($USERARR  as $user) {    List($realName) =Explode("&",$user); List(,$REALPWD) =Explode("&",$user); if($userName==$realName&&$pwd==$REALPWD){        Echo"True";  die(); }}
echo "false";

Then at the front desk to determine if the return is true can jump to the page.

Use PHP and Ajax to interact with front and back data--take a user login as an example