Home > Developer > Web Develop
We use PHP today to do the foreground and background interactive effect, first we first open this software.
Look at the small icon in the lower right corner of the computer
When the left mouse button is turned
Open this after clicking on the second one will open a website
Click the database on the right page to open the new database, fill in the database name and mode
After clicking Create, the Create successful popup box appears, click on the right page to our newly created database
Create a new data table in the new database, fill in the data table name and number of fields
Because I only want the password and username two data, so I just have to click on the number of fields to execute, pop up a page box, we have the data name and format we want to fill in the table
After creation we will scroll down, find the save, do not click to execute, because that is when you want too much data, when the number of fields is not enough, add a few more fields. When we're done, we'll create a new Web page and PHP file and an ajax file .
Then we're going to write the front-end stuff.
This is an ajax file
Convert data to a=1&b=2 format;
function Json2url (JSON) {
var arr = [];
Plus random numbers to prevent caching;
json.t = Math.random ();
for (var name in JSON) {
Arr.push (name+ ' = ' +json[name]);
}
Return Arr.join (' & ');
}
Function Ajax (JSON) {
Consider the default values:
if (!json.url) {
Alert (' Please enter a reasonable request address! ');
Return
}
Json.type = Json.type | | ' Get ';
Json.time = Json.time | | 5000;
Json.data = Json.data | | {};
1. Create an Ajax object;
var timer = null;
if (window. XMLHttpRequest) {
var oajax = new XMLHttpRequest ();
}else{
var oajax = new ActiveXObject (' microsoft.xmlhttp ');
}
Determine if the user is passing a GET or POST request:
Switch (Json.type.toLowerCase ()) {
Case ' get ':
2. Open the request;
Oajax.open (' Get ', json.url+ '? ') +json2url (Json.data), true);
3. Send data:
Oajax.send ();
Break
Case ' post ':
Open the request;
Oajax.open (' Post ', json.url,true);
Set the request header;
Oajax.setrequestheader (' Content-type ', ' application/x-www-form-urlencoded ');
Send data;
Oajax.send (Json2url (json.data));
Break
}
Json.fnloading && json.fnloading ();
4. Get Response data
Oajax.onreadystatechange = function () {
if (oajax.readystate = = 4) {
Json.complete && json.complete ();
if (oajax.status >= && Oajax.status < | | oajax.status = 304) {
If a successful callback function is passed outside, then execute,
Json.success && json.success (oajax.responsetext);
} else {
If the failed callback function is passed outside, then the error code pops up,
Json.error && Json.error (oajax.status);
}
Cleartimeout (timer);//The timer is cleared after the data is taken within the specified time;
}
};
};
This is an HTML file
<! DOCTYPE html>
<meta charset= "UTF-8" >
<title></title>
<style>
IMG {
width:20px;
height:30px;
Display:none;
}
</style>
<script src= "Ajax.js" ></script>
<script>
Window.onload = function () {
var ouser = document.getElementById (' user ');
var opass = document.getElementById (' Pass ');
var oBtn1 = document.getElementById (' btn1 ');
var oBtn2 = document.getElementById (' btn2 ');
var oimg = document.getElementById (' img ');
var Ospan = document.getElementById (' span ');
Obtn1.onclick = function () {
OImg.style.display = "block";
Ajax ({
URL: ' user.php ',
Data: {
Act: ' LGN ',
User:oUser.value,
Pass:oPass.value
},
Fnloading:function () {
OImg.style.display = ' block ';
},
Success:function (res) {
var json = eval ("(" + res + ")");
if (Json.err) {
ospan.innerhtml = json.msg;
OImg.style.display = "None";
} else {
ospan.innerhtml = json.msg;
OImg.style.display = "None";
}
},
Error:function (s) {
alert (s);
}
});
}
}
</script>
<body>
Username:<input type= "text" name= "user" id= "user"/><br/><br/> Password:
<input type= "text" name= "pass" id= "pass"/><br/><br/>
<input type= "button" Name= "Btn1" id= "btn1" value= "Login"/>
<input type= "button" Name= "Btn1" id= "btn2" value= "register"/>
<br/><br/>
<span id= "span" ><br/><br/>
</span>
</body>
we're going to introduce Ajax, and then let Ajax introduce PHP, notice that HTML The picture in is a picture when the file is loaded. Add that is just for more vivid, add not to add the words, add to find the dynamic map on the line, there are many online, find your own like the line
This is the PHP file
<?php
Header ("content-type:text/html; Charset=utf-8 ");/*php file output in UTF-8 encoded format */
Error_reporting (E_all & ~e_deprecated);/* Ignore error hints */
$act =$_get[' act '];
@ $user =$_get[' user '];
@ $pass =$_get[' pass ');
Switch ($act) {
Case ' LGN ':
mysql_connect (' localhost ', ' root ', ');
the name of the database introduced
mysql_select_db (' 2017-6-25 ');
$sql = "SELECT * FROM User WHERE
Username= ' ". $user." ' "; / This is the name of the data table created
$res =mysql_query ($sql);
$row =mysql_fetch_row ($res);
if ($row) {
if ($row [1]== $pass) {
Echo ' {err:0, msg: ' Login successful '} ';
}else{
Echo ' {err:1,msg: ' username or password is wrong! '} ';
}
}else{
Echo ' {err:1,msg: ' User name does not exist '} ';
}
Break
Case ' Add ':
mysql_connect (' localhost ', ' root ', ');
the name of the database introduced
mysql_select_db (' 2017-6-25 ');
$sql = "SELECT * from user WHERE username= '". $user. "'"; / This is the name of the data table created
$res =mysql_query ($sql);
$row =mysql_fetch_row ($res);
if ($row) {
Echo ' {err:1,msg: ' username already exists! '} ';
}else{
$I _sql= "INSERT into user VALUES ('". $user. "', '". $pass. "')";
mysql_query ($I _sql);
Echo ' {err:0,msg: ' Registered successfully! '} ';
}
};
?>
Note that PHP has the name of the background database and data table you want to view, just the database and data table we just created. Then we just open a browser and after adding 127.0.0.1 on the Address bar, Open the wampmanager Program page to find the folder we just created
Then open our new page on the line (note that you must drag the folder to the WWW folder under the Wampmanager program) and Then we can look at the effect.
Using WAMP to achieve interaction between the front end and PHP
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
