Ajax PHP Project Combat

These two days in the experimental building learning Ajax, the background is written in PHP, the following I will be three real-time projects to share out, but also convenient for me to check back anytime.

The first item I wrote the comments in more detail, the second and the third note is less, because the method is similar; these three items are what we often see, for our test friends, most of us do not know how this is achieved (of course, including myself); We go through constant learning code, Know how the function is implemented, we test it is much easier, also will not put forward some very small white question, was developer laughed.

Okay, here are the three items, what's the problem in the middle of the hope that everyone:

First, Environment preparation: 1, build PHP development environment, Wampserver:

Installation Details: http://jingyan.baidu.com/article/2d5afd69efe9cf85a3e28e54.html

2. Prepare the data

After connecting the MySQL database, create the database, table:

Create a database Ajaxtest

Create DATABASE ajaxtest default CharSet UTF8;

Use Ajaxtest;

To create a ajaxtable table:

CREATE TABLE Ajaxtable (

UserID Int (one) not NULL auto_increment

Username varchar () NOT NULL,

Userpass varchar () NOT NULL,

Userage Int (one) is not NULL,

Usersex varchar (1) NOT NULL,

Primary KEY (UserID)

);

Insert data:

INSERT into ajaxtable values (1, ' Zhang San ', ' Lisi ', ' 28 ', ' Female ');

INSERT into ajaxtable values (2, ' Zhang Yi ', ' Lisi ', ' 18 ', ' Male ');

INSERT into ajaxtable values (3, ' Zhang Yi ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (4, ' Wang Yi ', ' Lisi ', ' 18 ', ' Male ');

INSERT into ajaxtable values (5, ' King II ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (6, ' Wang San ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (7, ' Wangsi ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (8, ' Harry ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (9, ' John Doe ', ' Lisi ', ' 18 ', ' Male ');

INSERT into ajaxtable values (10, ' 63 ', ' Lisi ', ' 18 ', ' Female ');

INSERT into ajaxtable values (11, ' Yangsi ', ' Lisi ', ' 18 ', ' Male ');

Second, ajax-php combat 1:

Objective: To enter age and gender values on the page, and to use Ajax to send requests to find the data that satisfies the criteria:

Results Demo:

My Project path is:

So access to the url:http://localhost/ajaxtest/ajaxpro1/index.html

Create index.html

 1 <! DOCTYPE html> 2 
 Created: ajaxtest.php 
 
 1 <?php 2/** 3 * Created by Phpstorm. 4 * User:xxx 5 * DATE:2016/10/10 6 * time:10:52 7 */8 9 error_reporting (0);//Disable Error Reporting # database MESSAGE11//databases The connection information is $dbhost = "localhost"; $dbuser = "root"; $dbpswd = "123456"; $dbname = "Ajaxtest"; 16 17//Gets the parameters passed in Ajax request $u Serage = $_get[' userage '];19 $usersex = $_get[' usersex '];20 $mysqli = new mysqli (); 22//Connection Database $mysqli->connect ($d Bhost, $dbuser, $DBPSWD, $dbname) ($mysqli->error) {echo "Connection database failed <br>". $mysqli->error;26}27//Set U Tf8 encoding $mysqli->set_charset ("UTF8");//SQL statement $query = "SELECT * from ajaxtable where usersex = ' $usersex '"; 31 32 # Determine if Userage is a number if (Is_numeric ($userage)) {$query. = "and Userage <= ' $userage '"; 35}36 # query data PNs $result = $m Ysqli->query ($query); 38 # Display list header $display _string = "<table>"; $display _string. = "<tr>"; $display _ String. = "<th> username </th>"; $display _string. = "<th> age </th>"; $display _string. "<th> gender </th>"; $display _string. = "</tr>"; 45 46 # Display Content ($row = $result->fetch_array ()) {48 $display _string. = "<tr>", $display _string. = "<td>". $row [' username ']. " </td> ", $display _string. =" <td> ". $row [' Usersex ']." </td> "$display _string. =" <td> ". $row [' Userage ']." </td> $display _string = "</tr>";}54 $display _string. = "</table>"; echo "SQL statement is:" $query. " <br> "_string;57 echo $display 58//Release Query results $result->close (); 60//off MySQL connection $mysqli->close ();
Third, ajax-php Combat 2:
Purpose: Enter the user name, verify the existence of the database, there is a corresponding prompt
Url:http://localhost/ajaxtest/ajaxpro2/index.html
Execution Result:
Project path:
Create index.html
 1 <! DOCTYPE html> 2 
To create a mycss.css file:
1 * {2     margin:0; 3     padding:0; 4     box-sizing:border-box; 5     -webkit-box-sizing:border-box; 6     -moz-b Ox-sizing:border-box; 7     -webkit-font-smoothing:antialiased; 8} 9 Body {One     font-family:arial,sans-serif;12     font-weight:300;     font-size:12px;14     line-height:30px;15}16. Container {     max-width:400px;19     position: Relative;20}21 #contact {     background: #F9F9F9;     padding:25px;25     margin:5px 0;26}27 #contact in Put[type= "text"] {     border:1px solid #AAA,     width:200px;31     height:25px;32}33 #contact Input: Focus, #contact Textarea:focus {     outline:0;36     border:1px solid #999; PNS}38::-webkit-input-placeholder {39     color: #888;}41:-moz-placeholder {     #888;}44::-moz-placeholder {:     #888; 46}47:- Ms-input-placeholder {     color: #888; 49}
To create a ajaxtest.php file:
1 <?php 2/** 3  * Created by Phpstorm. 4  * User:xxx 5  * DATE:2016/10/11 6  * time:9:00 7 */  8 err Or_reporting (0); 9 $dbhost = "localhost", $dbuser = "root", one $dbpswd = "123456"; $dbname = "Ajaxtest"; $checkmsg = $_get[' Usernam E '];15 $myselect = new mysqli (); $myselect->connect ($dbhost, $dbuser, $DBPSWD, $dbname); $myselect->set_ CharSet ("UTF8"), $sql = "SELECT * from ajaxtable where username= ' $checkmsg '"; $result = $myselect->query ($sql); 21 2 2 $rownum = $result->num_rows;23//echo $rownum, if ($rownum >= 1) {     echo ' <font color= ' red ' > username already exists </font> ';}else{27     echo ' <font color= "green" > User name available </font> ';}29 $result->close (); 31 $ Myselect->close ();
Four, ajax-php Combat 3:
Purpose: Search According to the input value, display the search results, and can click the value in the drop-down box to jump to the new page, or according to the input value, click the Search button to enter the results page.
Results Demo:
Project path:
Visit url:http://localhost/ajaxtest/ajaxpro3/index.html
Create index.html
 1 <! DOCTYPE html> 2 
Create Mycss.css
1 Body {2     color: #555; 3} 4  5 #keywords {6     width:485px; 7     height:28px; 8     margin:0px; 9     font- Size:14px;10}11 #showmsg {     display:block;14     border:solid 1px #B0B0B0;     width:487px;16     line-height:28px;17     font-size:14px;18}19 #submit {     width:90px;22 height:30px;23}24 +     a:link{te Xt-decoration:none; Color:blue}26 a:active{Text-decoration:blink;} a:visited {text-decoration:none; color:green}28 a:hover{text-decoration:underline; color:red}
Create ajaxtest.php
 1 <?php 2/** 3 * Created by Phpstorm. 4 * User:lsh 5 * DATE:2016/10/11 6 * time:11:00 7 */8 error_reporting (0); 9 $dbhost = "localhost", $dbuser = "root", one $dbpswd = "123456"; $dbname = "Ajaxtest"; $checkmsg = $_get[' keyword S '];15 $myselect = new mysqli (); $myselect->connect ($dbhost, $dbuser, $DBPSWD, $dbname); $myselect->set_ CharSet ("UTF8"), $sql = "SELECT * from ajaxtable where username like '% $checkmsg% '"; $result = $myselect->query ($sq L) $rownum = $result->num_rows;23//echo $rownum; if ($rownum < 1) {echo "Database no data";}else if ($rownum = = 1) {$row = $result->fetch_array (); echo "<a href= ' result.php?keywords=". $row [' username ']. "' > ". $row [' username ']." </a>}else{30 while ($row = $result->fetch_array ()) {echo "<a href= ' result.php?keywords=". $r ow[' username ']. "' > ". $row [' username ']." </a> "." <br>}33}34 $result->close (); $myselect->close ();
 Create result.php: 
 
 1 <?php 2/** 3 * Created by Phpstorm. 4 * User:lsh 5 * DATE:2016/10/11 6 * time:11:00 7 */8 error_reporting (0); 9 $dbhost = "localhost", $dbuser = "root", one $dbpswd = "123456"; $dbname = "Ajaxtest"; $checkmsg = $_get[' keyword S '];15 $myselect = new mysqli (); $myselect->connect ($dbhost, $dbuser, $DBPSWD, $dbname); $myselect->set_ CharSet ("UTF8"), $sql = "SELECT * from ajaxtable where username like '% $checkmsg% '"; $result = $myselect->query ($sq l);//echo $sql; >24 <! DOCTYPE html>25 
Ajax PHP Project Combat