企业官网建设流程全解析

哪个网站可以做全网推广,网业翻译成中文,江门网站设计素材,网站开发需求文档范文今天我们做一个小玩意#xff0c;就是一个简单的记事本功能#xff0c;这里会用到我们之前学到的基本知识的整合#xff0c;让大家对web软件有一个更深层次的认识。功能流程如下#xff1a;界面有一个文本输入框#xff0c;一个姓名输入框#xff08;模拟不同的人#x…今天我们做一个小玩意就是一个简单的记事本功能这里会用到我们之前学到的基本知识的整合让大家对web软件有一个更深层次的认识。功能流程如下界面有一个文本输入框一个姓名输入框模拟不同的人提交到后台经由php进行处理并保存到数据库中界面进行刷新会获取到插入的数据。我们之前的web数据库中创建一个notebook数据表保存用户信息和留言内容create table notebook (id int not null primary key auto_increment,username varchar(10) comment 用户名,content text comment 记事本内容);notebook.htmlhtml head titlejs/title meta http-equivContent-Type contenttext/html; charsetUTF-8/ /head body div styledisplay: flex; div classleft_container stylewidth: 50%; div留言列表/div div classnote_list/div /div div classright_container textarea classnote_content cols50 rows10 placeholder内容/textarea input classnote_username styledisplay: block; placeholder用户名 div button classajax_btn提交/button /div /div /div /body script srchttps://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js/script script typetext/javascript src./notebook.js /script /htmlnotebook.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 usernameusername; str contentcontent; xhr.send(actaddInfostr); }); // 获取留言列表 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 i0;ilist.length;i) { var info list[i]; listStr divspan stylecolor:redinfo.username说/span: info.content/div } $(.note_list).html(listStr); } } xhr.send(actallInfo); })注我们使用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文件。