练习(记事本功能)
今天我们做一个小玩意，就是一个简单的记事本功能，这里会用到我们之前学到的基本知识的整合，让大家对web软件有一个更深层次的认识。
功能流程如下：
界面有一个文本输入框，一个姓名输入框（模拟不同的人），提交到后台经由php进行处理，并保存到数据库中，界面进行刷新会获取到插入的数据。
我们之前的web数据库中，创建一个notebook数据表，保存用户信息和留言内容：
create table notebook (id int not null primary key auto_increment,username varchar(10) comment "用户名",content text comment "记事本内容");notebook.html
<html> <head> <title>js</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> </head> <body> <div style="display: flex;"> <div class="left_container" style="width: 50%;"> <div>留言列表：</div> <div class="note_list"></div> </div> <div class="right_container"> <textarea class="note_content" cols="50" rows="10" placeholder="内容"></textarea> <input class="note_username" style="display: block;" placeholder="用户名"> <div> <button class="ajax_btn">提交</button> </div> </div> </div> </body> <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript" src="./notebook.js"> </script> </html>notebook.js
$(".ajax_btn").click(function(){ var username = $(".note_username").val(); var content = $(".note_content").val(); var xhr = new XMLHttpRequest(); xhr.open("post","http://localhost/notebook.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function(e) { if(xhr.readyState == 4 && xhr.status == 200) { window.location.reload(true); } } var str = "username="+username; str += "&content="+content; xhr.send("act=addInfo&"+str); }); // 获取留言列表 var xhr = new XMLHttpRequest(); xhr.open("post","http://localhost/notebook.php",true); xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xhr.onreadystatechange = function(e) { if(xhr.readyState == 4 && xhr.status == 200) { var list = JSON.parse(xhr.responseText); var listStr = ""; for(var i=0;i<list.length;i++) { var info = list[i]; listStr +="<div><span style='color:red'>"+info.username+"说</span>: "+info.content+"</div>" } $(".note_list").html(listStr); } } xhr.send("act=allInfo"); })注：我们使用jqeury在这个html加载进来的时候，会向后台发起请求获取已留言的用户信息！当我们点击提交按钮的时候，会把输入的留言内容和模拟的留言用户发送到后台notebook.php文件，收到返回信息后重新刷界面获取最新的列表，你也可以通过更改后台逻辑使用jquery来动态添加数据。
notebook.php
<?php class MySql{ private $hostname = "127.0.0.1"; // 数据库地址 private $username = "root"; // 数据库登录账户 private $password = "root"; // 数据库登录密码 private $conn; public function __construct(){ $this->conn = new mysqli($this->hostname,$this->username,$this->password); if($this->conn->connect_error) { trigger_error("连接失败"); } } public function allInfo($database,$table) { $this->conn->query("use ".$database); $data = $this->conn->query("select * from ".$table); $result = $data->fetch_all(MYSQLI_ASSOC); return $result; } public function addInfo($database,$table,$data) { $this->conn->query("use ".$database); $sql = "insert into ".$table."("; $keyStr = ""; $valueStr = ""; foreach($data as $k=>$v) { $keyStr.=$k.","; $valueStr.="'$v'".","; } $keyStr = substr($keyStr,0,strlen($keyStr)-1); $valueStr = substr($valueStr,0,strlen($valueStr)-1); $sql.=$keyStr.") values (".$valueStr.")"; $state = $this->conn->query($sql); return $sql; } } $mysql = new MySql(); $result = ""; switch($_POST["act"]) { case "addInfo": $info = array("username"=>$_POST["username"],"content"=>$_POST["content"]); $result = $mysql->addInfo("web","notebook",$info); break; case "allInfo": $result = $mysql->allInfo("web","notebook"); break; } print_r(json_encode($result));注：
在这里我们封装了一个自定义的MySql类，这个类里有两个方法，通过发送过来的act参数判断用户的操作，allInfo 是获取留言列表,addInfo是用来添加留言，通过MySql提供的两个方法来调用插入数据和获取数据。
注：我们写完上面这些代码后，通过在址址栏里输入localhost/notebook.html，这里访问的是html文件，而不是那个php文件。