PHP之前后联动-kangfz

PHP之前后联动

php的优点网上可以找到一大堆，不过也有它的缺点，它本身没有真正与模板分离，也好，大家也学一点前端的知识。
1、在根目录下建templates,js,css,images
2、访问jquery.com，下载jquery.js。我这里就不讲javascript（JS）的语法了，用jquery会变得更简单。jquery是对JS的一个封装。
这是最新版本的链接：
https://code.jquery.com/jquery-3.2.0.min.js
访问它时有可能不会触发下载，而是看到此js的原代码，没关系，再保存页面即可

一般为了方便会重命名为jquery.js，具体的版本还在文件里面保存，不怕。
3、在templates下面建head.html,foot.html两个文件

（1）head.html写入代码（这里不是HTML5的写法，H5写法更简洁，推荐学习）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="https://kangfz.blog.163.com/blog/./css/main.css" type="text/css" />
<script type="text/javascript" src="https://kangfz.blog.163.com/blog/./js/jquery.js"></script>
<title>我们来学习PHP</title>
</head>
<body>
这样CSS和JS的内容，由它来引入

（2）foot.html写入代码：
<div>可以放一些copyright，关于我们，友情链接什么的，这里就不搞了</div>
</body>
</html>
一些弹出的窗口等，都可以写在这里面

4、上次的index.php改名为getUserInfo.php

(1)新建一个index.php，先写入代码
<?
include "./templates/head.html";
?>
<?
include "./templates/foot.html";
?>
在这里可以思考一下，用户访问index.php时，其实就是访问了header和foot合起来的内容。

（2）getUserInfo.php的代码修改为：
<?
include dirname(__FILE__)."/includes/common.php";

if($_GET['tab'] == 'go') {
    //读取数据
    $query = $db->query("select * from `sys_editors` where `username`='kangzhiwei'");

    if(is_object($query)) {
        echo '<table class="usertable">';
        while($row = $db->fetch_assoc($query)) {
            echo '<tr>';
            echo '<td>用户名：',$row['username'],'</td>';
            echo '<td>密码：',$row['password'],'</td>';
            echo '</tr>';
        }
        echo '</table>';
        echo '<div>';
        echo date("Y-m-d H:i:s",time());
        echo '</div>';
    }
}
?>

5、在css下建main.css文件
写入代码
html {
    text-align: center;
    background: #09F ;
}
body {
    width: 940px;
    height:740px;
    text-align: left;
    margin: 0 auto;
    background: #CCC;
}
input { font: 10pt Verdana, Arial, Helvetica, sans-serif, "宋体"; }
.main{
    width:940px;
    height:720px;
    text-align: left;
    margin: 0 auto;
}
.usertable, table, td {
    border:1px solid #00F;
}
说明一下：CSS往往会与图片匹配，比如把html的修改为：
html {
    text-align: center;
    background: #EDEDED url(../images/main_bg.jpg) repeat-x left top;
}
那么就需要在images下面放一个图片main_bg.jpg，根据这里的CSS语句，这个图片应该是一个1个相素宽，1024或者其它高度，以通过repaet，做为背景。
我这里不就演示了，所以images下面也就空着了

6、到这里，框架已经完成了，我们接下来完善index.php，这是核心的地方
<?
include "./templates/head.html";
?>

<div class="main">
<input type="button" onclick="getUserInfo()" value="获取用户信息"/>
    <div id="showinfo">
    </div>
</div>
<script language="javascript">
function getUserInfo()
{
    $.get("./getUserInfo.php",{'tab':'go'},function(result){
        $("#showinfo").html(result);
    });
}
</script>
<?
include "./templates/foot.html";
?>
访问localhost，单击按钮，可以得到如下结果

稍等总结一下：
1、php真正在服务端工作了，由前面的请求反馈需要的数据
2、体会css在美工上的作用，虽然我这个很丑
3、感受Ajax技术，是的，当页面内容变化时，整个页面并没有刷新，这样的感觉很好
4、发现jquery的代码真的很简洁，如果要用JS写同样的效果，会很繁琐

如果细心的话会发现界面显示的时间与自己电脑上的慢了7个小时，一般都是时区错误引起的，我们来打开php.ini，搜索timezone，可以找到：
date.timezone=Europe/Berlin
我们把等号后面的改为Asia/Shanghai，Asia/Chongqing 或者 PRC等，重启Apache就可以了。因为中国使用的是统一时区，感觉用PRC心里舒服点。亚洲时区里只有上海，重庆，香港等，没有北京，是有历史原因的，有兴趣可以查一下。

入门的东西看看大家还有没有想了解的？以后再补充。

● php ● js ● html

kangfz

PHP之前后联动

评论