zoukankan      html  css  js  c++  java

  • 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发送请求，查询出满足条件的数据：

    结果演示：

     

    我的项目路径是：

     

    所以访问的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>
  • 相关阅读:
    常见寻找OEP脱壳的方法
    Windows内核原理系列01
    HDU 1025 Constructing Roads In JGShining's Kingdom
    HDU 1024 Max Sum Plus Plus
    HDU 1003 Max Sum
    HDU 1019 Least Common Multiple
    HDU 1018 Big Number
    HDU 1014 Uniform Generator
    HDU 1012 u Calculate e
    HDU 1005 Number Sequence
  • 原文地址：https://www.cnblogs.com/xiaoshitoutest/p/5954365.html
Copyright © 2011-2022 走看看