Ajax PHP项目实战

这两天在实验楼学习ajax，后台是用php写的，下面我将三个实战项目分享出来，也方便我以后随时查看。

第一个项目我写的注释比较详细，第二个和第三个注释就写的比较少了，因为用的方法都差不多；这三个项目都是我们经常看到的，针对我们做测试的朋友来说，大部分是不知道这个到底是怎么实现的（当然包括我自己）；我们经过不断的学习代码，知道功能是怎么实现的，我们测试起来也就轻松得多，也就不会提出一些很小白的问题，被developer笑了。

好了下面就是三个项目，中间有什么问题希望大家不吝赐教：

一、环境准备：

1、搭建php开发环境, WampServer：

安装详情：http://jingyan.baidu.com/article/2d5afd69efe9cf85a3e28e54.html

2、准备数据

连接mysql数据库之后、创建数据库，表：

创建数据库 ajaxtest

create database ajaxtest default charset utf8;

use ajaxtest;

创建ajaxtable表：

create table ajaxtable(

userid int(11) not null auto_increment

username varchar(50) not null,

userpass varchar(50) not null,

userage int(11) not null,

usersex varchar(1) not null,

primary key(userid)

);

插入数据：

insert into ajaxtable values(1,'张三','lisi','28','女');

insert into ajaxtable values(2,'张一','lisi','18','男');

insert into ajaxtable values(3,'张二','lisi','18','女');

insert into ajaxtable values(4,'王一','lisi','18','男');

insert into ajaxtable values(5,'王二','lisi','18','女');

insert into ajaxtable values(6,'王三','lisi','18','女');

insert into ajaxtable values(7,'王四','lisi','18','女');

insert into ajaxtable values(8,'王五','lisi','18','女');

insert into ajaxtable values(9,'李四','lisi','18','男');

insert into ajaxtable values(10,'六三','lisi','18','女');

insert into ajaxtable values(11,'杨思','lisi','18','男');

二、Ajax—PHP实战1：

目的：在页面输入年龄、性别值，利用ajax发送请求，查询出满足条件的数据：

Ajax PHP项目实战-LMLPHP

结果演示：

Ajax PHP项目实战-LMLPHP

我的项目路径是：

Ajax PHP项目实战-LMLPHP

所以访问的url：http://localhost/ajaxtest/ajaxpro1/index.html

创建index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>ajaxtest</title>

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <script language="JavaScript" type="text/javascript">

         function ajaxFunction(){

             //该函数将页面的输入年龄和性别的值发送到ajaxtest.php中，然后返回查询的结果

             var xmlhttp;//定义一个xmlhttp变量

             try{

                 xmlhttp = new XMLHttpRequest();//一个XMLHttpRequest对象

             }catch (e){

                 try{

                     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//这个主要是针对ie浏览器低版本的

                 }catch (e){

                     alert("你的游览器不支持");

                     return false;

                 }

             }

 //

 //            如果readyState状态改变，那就会触发onreadystatechange事件

 //            readyState的状态：

 //            0: 请求未初始化

 //            1: 服务器连接已建立

 //            2: 请求已接收

 //            3: 请求处理中

 //            4: 请求已完成，且响应已就绪

             xmlhttp.onreadystatechange = function () {

                 if(xmlhttp.readyState == 4){

                     //如果readyState的状态为4，获取id为ajaxDiv的元素

                     var ajaxDisplay = document.getElementById('ajaxDiv');

                     //将查询的结果返回，显示

                     ajaxDisplay.innerHTML = xmlhttp.responseText;

                 }

             }

             //获取id为userage的元素，也就是年龄的值

             var userage = document.getElementById('userage').value;

             //获取id为usersex的元素，也就是性别的值

             var usersex = document.getElementById('usersex').value;

             //拼接请求的url

             var url = "?userage=" + userage;

             url += "&usersex=" + usersex;

             //准备请求

             xmlhttp.open("GET", "ajaxtest.php" + url, true);

             //将请求发送到服务器

             xmlhttp.send();

         }

     </script>

 </head>

 <body>

 <form name="myform">

     Age: <input type="text" name="userage" id="userage"><br><br>

     Sex: <select id="usersex" name="usersex">

     <option value="男">男</option>

     <option value="女">女</option>

 </select>

     <br><br>

     <input type="button" onclick="ajaxFunction()" value="执行">

 </form>

 <div id="ajaxDiv">显示执行ajax结果</div>

 </body>

 </html>

创建：ajaxtest.php

 <?php

 /**

  * Created by PhpStorm.

  * User: xxx

  * Date: 2016/10/10

  * Time: 10:52

  */

 error_reporting(0);//禁用错误报告

 # database message

 // 数据库连接信息

 $dbhost = "localhost";

 $dbuser = "root";

 $dbpswd = "123456";

 $dbname = "ajaxtest";

 // 获取ajax请求传入的参数

 $userage = $_GET['userage'];

 $usersex = $_GET['usersex'];

 $mysqli = new mysqli();

 // 连接数据库

 $mysqli->connect($dbhost, $dbuser, $dbpswd, $dbname);

 if($mysqli->error){

     echo "连接数据库失败<br>".$mysqli->error;

 }

 // 设置utf8编码

 $mysqli->set_charset("utf8");

 // sql语句

 $query = "select * from ajaxtable where usersex = '$usersex'";

 # 判断userage是否是个数字

 if(is_numeric($userage)){

     $query .= " AND userage <= '$userage'";

 }

 # 查询数据

 $result = $mysqli->query($query);

 # 显示列表头

 $display_string = "<table>";

 $display_string .= "<tr>";

 $display_string .= "<th>用户名</th>";

 $display_string .= "<th>年龄</th>";

 $display_string .= "<th>性别</th>";

 $display_string .= "</tr>";

 # 显示内容

 while ($row = $result->fetch_array()){

     $display_string .= "<tr>";

     $display_string .= "<td>".$row['username']."</td>";

     $display_string .= "<td>".$row['usersex']."</td>";

     $display_string .= "<td>".$row['userage']."</td>";

     $display_string .= "</tr>";

 }

 $display_string .= "</table>";

 echo "SQL语句为：".$query."<br>";

 echo $display_string;

 // 释放查询结果

 $result->close();

 // 关闭mysql连接

 $mysqli->close();

三、Ajax—PHP实战2：

目的：输入用户名，验证数据库是否存在，有相应的提示

url: http://localhost/ajaxtest/ajaxpro2/index.html

执行结果：

Ajax PHP项目实战-LMLPHP

项目路径：

Ajax PHP项目实战-LMLPHP

创建index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Ajax表单验证</title>

     <!--引入css文件：mycss.css-->

     <link href="mycss.css" rel="stylesheet" type="text/css">

     <script>

         function showHint() {

             // 获取用户名输入框的值

             var str = document.getElementById("username").value;

             if (str.length == 0){

                 // 如果输入框值为空的时候，提示

                 document.getElementById("showmsg").innerHTML = "用户名不能为空";

                 return;

             }else {

                 // ajax发送请求

                 var xmlhttp = new XMLHttpRequest();

                 xmlhttp.onreadystatechange = function () {

                     if (xmlhttp.readyState == 4 && xmlhttp.status == 200){

                         document.getElementById('showmsg').style.display = "block";

                         document.getElementById('showmsg').innerHTML = xmlhttp.responseText;

                     }

                 }

                 xmlhttp.open("GET", "ajaxtest.php?username=" + str, true);

                 xmlhttp.send();

             }

         }

     </script>

 </head>

 <body>

     <div class="container">

         <form id="contact" method="post">

             <input type="text" placeholder="用户名" id="username" name="username" onblur="showHint()">

             <div id="showmsg" style="display: none"></div>

         </form>

     </div>

 </body>

 </html>

创建mycss.css文件：

 * {

     margin:;

     padding:;

     box-sizing: border-box;

     -webkit-box-sizing: border-box;

     -moz-box-sizing: border-box;

     -webkit-font-smoothing: antialiased;

 }

 body {

     font-family: Arial,sans-serif;

     font-weight:;

     font-size: 12px;

     line-height: 30px;

 }

 .container {

     max-width: 400px;

     position: relative;

 }

 #contact {

     background: #F9F9F9;

     padding: 25px;

     margin: 5px 0;

 }

 #contact input[type="text"] {

     border: 1px solid #AAA;

     width: 200px;

     height: 25px;

 }

 #contact input:focus, #contact textarea:focus {

     outline:;

     border:1px solid #999;

 }

 ::-webkit-input-placeholder {

     color:#888;

 }

 :-moz-placeholder {

     color:#888;

 }

 ::-moz-placeholder {

     color:#888;

 }

 :-ms-input-placeholder {

     color:#888;

 }

创建ajaxtest.php文件：

 <?php

 /**

  * Created by PhpStorm.

  * User: xxx

  * Date: 2016/10/11

  * Time: 9:00

  */

 error_reporting(0);

 $dbhost = "localhost";

 $dbuser = "root";

 $dbpswd = "123456";

 $dbname = "ajaxtest";

 $checkmsg = $_GET['username'];

 $myselect = new mysqli();

 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);

 $myselect->set_charset("utf8");

 $sql = "select * from ajaxtable where username='$checkmsg'";

 $result = $myselect->query($sql);

 $rownum = $result->num_rows;

 //echo $rownum;

 if($rownum >= 1){

     echo '<font color="red">用户名已存在</font>';

 }else{

     echo '<font color="green">用户名可用</font>';

 }

 $result->close();

 $myselect->close();

四、Ajax—PHP实战3：

目的：根据输入的值进行搜索，显示出搜索结果，并且可以点击下拉框中的值可以跳转到新的页面；也可以根据输入的值，点击搜索按钮，进入结果页面。

结果演示：

Ajax PHP项目实战-LMLPHP

项目路径：

Ajax PHP项目实战-LMLPHP

访问Url：http://localhost/ajaxtest/ajaxpro3/index.html

创建index.html

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Ajax搜索</title>

     <link href="mycss.css" rel="stylesheet" type="text/css">

     <script>

         function showHint(str) {

             if(str.length==0){

                 document.getElementById("showmsg").innerHTML = "";

                 return;

             }else {

                 var xmlhttp = new XMLHttpRequest();

                 xmlhttp.onreadystatechange = function () {

                     if(xmlhttp.readyState == 4 && xmlhttp.status == 200){

                         document.getElementById("showmsg").style.display = "block";

                         document.getElementById("showmsg").innerHTML = xmlhttp.responseText;

                     }

                 }

                 xmlhttp.open("GET","ajaxtest.php?keywords=" + str,true);

                 xmlhttp.send();

             }

         }

     </script>

 </head>

 <body>

     <form action="result.php" method="get">

         <input type="text" name="keywords" id="keywords" onkeyup="showHint(this.value)">

         <input type="submit" name="submit" id="submit" value="搜索">

         <div id="showmsg" style="display: none"></div>

     </form>

 </body>

 </html>

创建mycss.css

 body {

     color: #555;

 }

 #keywords {

     width: 485px;

     height: 28px;

     margin: 0px;

     font-size: 14px;

 }

 #showmsg {

     display: block;

     border: solid 1px #B0B0B0;

     width: 487px;

     line-height: 28px;

     font-size: 14px;

 }

 #submit{

     width: 90px;

     height: 30px;

 }

 a:link{ text-decoration: none; color: blue}

 a:active{ text-decoration: blink;}

 a:visited {text-decoration: none; color: green}

 a:hover{ text-decoration: underline; color: red}

创建ajaxtest.php

 <?php

 /**

  * Created by PhpStorm.

  * User: LSH

  * Date: 2016/10/11

  * Time: 11:00

  */

 error_reporting(0);

 $dbhost = "localhost";

 $dbuser = "root";

 $dbpswd = "123456";

 $dbname = "ajaxtest";

 $checkmsg = $_GET['keywords'];

 $myselect = new mysqli();

 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);

 $myselect->set_charset("utf8");

 $sql = "select * from ajaxtable where username LIKE '%$checkmsg%'";

 $result = $myselect->query($sql);

 $rownum = $result->num_rows;

 //echo $rownum;

 if($rownum < 1){

     echo "数据库无数据";

 }else if($rownum == 1){

     $row = $result->fetch_array();

     echo "<a href='result.php?keywords=".$row['username']."'>".$row['username']."</a>";

 }else{

     while ($row = $result->fetch_array()){

         echo "<a href='result.php?keywords=".$row['username']."'>".$row['username']."</a>"."<br>";

     }

 }

 $result->close();

 $myselect->close();

创建result.php:

 <?php

 /**

  * Created by PhpStorm.

  * User: LSH

  * Date: 2016/10/11

  * Time: 11:00

  */

 error_reporting(0);

 $dbhost = "localhost";

 $dbuser = "root";

 $dbpswd = "123456";

 $dbname = "ajaxtest";

 $checkmsg = $_GET['keywords'];

 $myselect = new mysqli();

 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);

 $myselect->set_charset("utf8");

 $sql = "select * from ajaxtable where username LIKE '%$checkmsg%'";

 $result = $myselect->query($sql);

 //echo $sql;

 ?>

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>查询结果</title>

     <link href="mycss.css" rel="stylesheet" type="text/css">

 </head>

 <body>

 <?php

 //echo $result->num_rows;

     while ($row = $result->fetch_array()){

         echo "<div><h1>姓名:$row[username]</h1><p>年龄:$row[userage],性别:$row[usersex]</p></div><br>";

     }

 $result->close();

 $myselect->close();

 ?>

 </body>

 </html>