这两天在实验楼学习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发送请求，查询出满足条件的数据：
结果演示：
我的项目路径是：
所以访问的url：http://localhost/ajaxtest/ajaxpro1/index.html
创建index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>ajaxtest</title>
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <script language="JavaScript" type="text/javascript">
8 function ajaxFunction(){
9 //该函数将页面的输入年龄和性别的值发送到ajaxtest.php中，然后返回查询的结果
10 var xmlhttp;//定义一个xmlhttp变量
11 try{
12 xmlhttp = new XMLHttpRequest();//一个XMLHttpRequest对象
13 }catch (e){
14 try{
15 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");//这个主要是针对ie浏览器低版本的
16 }catch (e){
17 alert("你的游览器不支持");
18 return false;
19 }
20 }
21 //
22 // 如果readyState状态改变，那就会触发onreadystatechange事件
23 // readyState的状态：
24 // 0: 请求未初始化
25 // 1: 服务器连接已建立
26 // 2: 请求已接收
27 // 3: 请求处理中
28 // 4: 请求已完成，且响应已就绪
29 xmlhttp.onreadystatechange = function () {
30 if(xmlhttp.readyState == 4){
31 //如果readyState的状态为4，获取id为ajaxDiv的元素
32 var ajaxDisplay = document.getElementById(‘ajaxDiv‘);
33 //将查询的结果返回，显示
34 ajaxDisplay.innerHTML = xmlhttp.responseText;
35 }
36 }
37 //获取id为userage的元素，也就是年龄的值
38 var userage = document.getElementById(‘userage‘).value;
39 //获取id为usersex的元素，也就是性别的值
40 var usersex = document.getElementById(‘usersex‘).value;
41 //拼接请求的url
42 var url = "?userage=" + userage;
43 url += "&usersex=" + usersex;
44 //准备请求
45 xmlhttp.open("GET", "ajaxtest.php" + url, true);
46 //将请求发送到服务器
47 xmlhttp.send();
48 }
49 </script>
50
51 </head>
52 <body>
53 <form name="myform">
54 Age: <input type="text" name="userage" id="userage"><br><br>
55 Sex: <select id="usersex" name="usersex">
56 <option value="男">男</option>
57 <option value="女">女</option>
58 </select>
59 <br><br>
60 <input type="button" onclick="ajaxFunction()" value="执行">
61 </form>
62 <div id="ajaxDiv">显示执行ajax结果</div>
63 </body>
64 </html>
创建：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);//禁用错误报告
10 # database message
11 // 数据库连接信息
12 $dbhost = "localhost";
13 $dbuser = "root";
14 $dbpswd = "123456";
15 $dbname = "ajaxtest";
16
17 // 获取ajax请求传入的参数
18 $userage = $_GET[‘userage‘];
19 $usersex = $_GET[‘usersex‘];
20
21 $mysqli = new mysqli();
22 // 连接数据库
23 $mysqli->connect($dbhost, $dbuser, $dbpswd, $dbname);
24 if($mysqli->error){
25 echo "连接数据库失败<br>".$mysqli->error;
26 }
27 // 设置utf8编码
28 $mysqli->set_charset("utf8");
29 // sql语句
30 $query = "select * from ajaxtable where usersex = ‘$usersex‘";
31
32 # 判断userage是否是个数字
33 if(is_numeric($userage)){
34 $query .= " AND userage <= ‘$userage‘";
35 }
36 # 查询数据
37 $result = $mysqli->query($query);
38 # 显示列表头
39 $display_string = "<table>";
40 $display_string .= "<tr>";
41 $display_string .= "<th>用户名</th>";
42 $display_string .= "<th>年龄</th>";
43 $display_string .= "<th>性别</th>";
44 $display_string .= "</tr>";
45
46 # 显示内容
47 while ($row = $result->fetch_array()){
48 $display_string .= "<tr>";
49 $display_string .= "<td>".$row[‘username‘]."</td>";
50 $display_string .= "<td>".$row[‘usersex‘]."</td>";
51 $display_string .= "<td>".$row[‘userage‘]."</td>";
52 $display_string .= "</tr>";
53 }
54 $display_string .= "</table>";
55 echo "SQL语句为：".$query."<br>";
56 echo $display_string;
57
58 // 释放查询结果
59 $result->close();
60 // 关闭mysql连接
61 $mysqli->close();
三、Ajax—PHP实战2：
目的：输入用户名，验证数据库是否存在，有相应的提示
url: http://localhost/ajaxtest/ajaxpro2/index.html
执行结果：
项目路径：
创建index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Ajax表单验证</title>
6 <!--引入css文件：mycss.css-->
7 <link href="mycss.css" rel="stylesheet" type="text/css">
8 <script>
9 function showHint() {
10 // 获取用户名输入框的值
11 var str = document.getElementById("username").value;
12 if (str.length == 0){
13 // 如果输入框值为空的时候，提示
14 document.getElementById("showmsg").innerHTML = "用户名不能为空";
15 return;
16 }else {
17 // ajax发送请求
18 var xmlhttp = new XMLHttpRequest();
19 xmlhttp.onreadystatechange = function () {
20 if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
21 document.getElementById(‘showmsg‘).style.display = "block";
22 document.getElementById(‘showmsg‘).innerHTML = xmlhttp.responseText;
23 }
24 }
25 xmlhttp.open("GET", "ajaxtest.php?username=" + str, true);
26 xmlhttp.send();
27 }
28
29 }
30 </script>
31 </head>
32 <body>
33 <div class="container">
34 <form id="contact" method="post">
35 <input type="text" placeholder="用户名" id="username" name="username" onblur="showHint()">
36 <div id="showmsg" style="display: none"></div>
37 </form>
38 </div>
39 </body>
40 </html>
创建mycss.css文件：
1 * {
2 margin: 0;
3 padding: 0;
4 box-sizing: border-box;
5 -webkit-box-sizing: border-box;
6 -moz-box-sizing: border-box;
7 -webkit-font-smoothing: antialiased;
8 }
9
10 body {
11 font-family: Arial,sans-serif;
12 font-weight: 300;
13 font-size: 12px;
14 line-height: 30px;
15 }
16
17 .container {
18 max-width: 400px;
19 position: relative;
20 }
21
22 #contact {
23 background: #F9F9F9;
24 padding: 25px;
25 margin: 5px 0;
26 }
27
28 #contact input[type="text"] {
29 border: 1px solid #AAA;
30 width: 200px;
31 height: 25px;
32 }
33
34 #contact input:focus, #contact textarea:focus {
35 outline:0;
36 border:1px solid #999;
37 }
38 ::-webkit-input-placeholder {
39 color:#888;
40 }
41 :-moz-placeholder {
42 color:#888;
43 }
44 ::-moz-placeholder {
45 color:#888;
46 }
47 :-ms-input-placeholder {
48 color:#888;
49 }
创建ajaxtest.php文件：
1 <?php
2 /**
3 * Created by PhpStorm.
4 * User: xxx
5 * Date: 2016/10/11
6 * Time: 9:00
7 */
8 error_reporting(0);
9 $dbhost = "localhost";
10 $dbuser = "root";
11 $dbpswd = "123456";
12 $dbname = "ajaxtest";
13
14 $checkmsg = $_GET[‘username‘];
15
16 $myselect = new mysqli();
17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);
18 $myselect->set_charset("utf8");
19 $sql = "select * from ajaxtable where username=‘$checkmsg‘";
20 $result = $myselect->query($sql);
21
22 $rownum = $result->num_rows;
23 //echo $rownum;
24 if($rownum >= 1){
25 echo ‘<font color="red">用户名已存在</font>‘;
26 }else{
27 echo ‘<font color="green">用户名可用</font>‘;
28 }
29
30 $result->close();
31 $myselect->close();
四、Ajax—PHP实战3：
目的：根据输入的值进行搜索，显示出搜索结果，并且可以点击下拉框中的值可以跳转到新的页面；也可以根据输入的值，点击搜索按钮，进入结果页面。
结果演示：
项目路径：
访问Url：http://localhost/ajaxtest/ajaxpro3/index.html
创建index.html
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Ajax搜索</title>
6 <link href="mycss.css" rel="stylesheet" type="text/css">
7 <script>
8 function showHint(str) {
9 if(str.length==0){
10 document.getElementById("showmsg").innerHTML = "";
11 return;
12 }else {
13 var xmlhttp = new XMLHttpRequest();
14 xmlhttp.onreadystatechange = function () {
15 if(xmlhttp.readyState == 4 && xmlhttp.status == 200){
16 document.getElementById("showmsg").style.display = "block";
17 document.getElementById("showmsg").innerHTML = xmlhttp.responseText;
18 }
19 }
20 xmlhttp.open("GET","ajaxtest.php?keywords=" + str,true);
21 xmlhttp.send();
22 }
23 }
24 </script>
25 </head>
26 <body>
27 <form action="result.php" method="get">
28 <input type="text" name="keywords" id="keywords" onkeyup="showHint(this.value)">
29 <input type="submit" name="submit" id="submit" value="搜索">
30 <div id="showmsg" style="display: none"></div>
31 </form>
32
33 </body>
34 </html>
创建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
12 #showmsg {
13 display: block;
14 border: solid 1px #B0B0B0;
15 width: 487px;
16 line-height: 28px;
17 font-size: 14px;
18 }
19
20 #submit{
21 width: 90px;
22 height: 30px;
23 }
24
25 a:link{ text-decoration: none; color: blue}
26 a:active{ text-decoration: blink;}
27 a:visited {text-decoration: none; color: green}
28 a:hover{ text-decoration: underline; color: red}
创建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";
10 $dbuser = "root";
11 $dbpswd = "123456";
12 $dbname = "ajaxtest";
13
14 $checkmsg = $_GET[‘keywords‘];
15
16 $myselect = new mysqli();
17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);
18 $myselect->set_charset("utf8");
19 $sql = "select * from ajaxtable where username LIKE ‘%$checkmsg%‘";
20 $result = $myselect->query($sql);
21
22 $rownum = $result->num_rows;
23 //echo $rownum;
24 if($rownum < 1){
25 echo "数据库无数据";
26 }else if($rownum == 1){
27 $row = $result->fetch_array();
28 echo "<a href=‘result.php?keywords=".$row[‘username‘]."‘>".$row[‘username‘]."</a>";
29 }else{
30 while ($row = $result->fetch_array()){
31 echo "<a href=‘result.php?keywords=".$row[‘username‘]."‘>".$row[‘username‘]."</a>"."<br>";
32 }
33 }
34
35 $result->close();
36 $myselect->close();
创建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";
10 $dbuser = "root";
11 $dbpswd = "123456";
12 $dbname = "ajaxtest";
13
14 $checkmsg = $_GET[‘keywords‘];
15
16 $myselect = new mysqli();
17 $myselect->connect($dbhost,$dbuser,$dbpswd,$dbname);
18 $myselect->set_charset("utf8");
19 $sql = "select * from ajaxtable where username LIKE ‘%$checkmsg%‘";
20 $result = $myselect->query($sql);
21
22 //echo $sql;
23 ?>
24 <!DOCTYPE html>
25 <html lang="en">
26 <head>
27 <meta charset="UTF-8">
28 <title>查询结果</title>
29 <link href="mycss.css" rel="stylesheet" type="text/css">
30 </head>
31 <body>
32 <?php
33 //echo $result->num_rows;
34 while ($row = $result->fetch_array()){
35 echo "<div><h1>姓名:$row[username]</h1><p>年龄:$row[userage],性别:$row[usersex]</p></div><br>";
36 }
37 $result->close();
38 $myselect->close();
39 ?>
40 </body>
41 </html>
时间： 2024-10-25 11:46:27