7、利用ThinkPHP实现前端与后端数据交互(实例:许愿墙)

阅读() @2018-07-15 14:13:38

下面是用ThinkPHP实现前端与后端数据交互的案例,涉及到表单提交、数据库查询、前端模板数据调用等。

1、PHP代码部分:

<?php
    class IndexAction extends Action {
        public function index(){
            //查询数据库记录
            $select = M('hope')->select();
            //向模板中分配数据的2种方法
            //$this->assign('a',111);
            $this->assign('hope',$select);
            $this->display('index');
            
        }
        public function validate(){
            if(!IS_POST){
                _404('亲,不好意思,此页面不存在',U('Index/index'));
            }else{
                $data = array(
                    'title'=>I('title'),
                    'content'=>I('content'),
                    'time'=>date('Y-m-d H:m:s',time())
                );
                //往数据库中插入数据
                if(M('hope')->data($data)->add()){
                    $this->success('发布成功',U('Index/index'));
                }else{
                    $this->error('发布失败');
                }
                //删除数据库中的记录
                /* $result = M('hope')->where(array('id'=>array('gt',0)))->delete();
                var_dump($result); */
            }
        }
    }

2、HTML部分:

<!-- 开始许愿按钮 -->
<div class="hope-btn">开始许愿</div>
<!-- 提交愿望form表单 -->
<div class="hope-form">
	<form action="{:U('Index/validate')}" method="post">
		<p>
			<label>标题:</label>
			<input type="text" name="title" />
		</p>
		<p>
			<label>内容:</label>
			<input type="text" name="content" />
		</p>
		<input type="submit" name="sub" value="提交" />
	</form>
</div>
<!-- 愿望展示 -->
<table cellpadding="0" cellspacing="0">
	<thead>
		<tr>
			<td>ID</td>
			<td>标题</td>
			<td>内容</td>
			<td>时间</td>
		</tr>
	</thead>
	<tbody>
		<foreach name="hope" key="key" item="value">
		<!-- <tr>
			<td>{$value.id}</td>
			<td>{$value.title}</td>
			<td>{$value.content}</td>
			<td>{$value.time}</td>
		</tr>	 -->
		<tr class="a{:mt_rand(1,5)}">
			<td>{$value['id']}</td>
			<td>{$value['title']}</td>
			<td>{$value['content']}</td>
			<td>{$value['time']}</td>
		</tr>	
		</foreach>
	</tbody>
</table>

3、CSS部分:

.hope-btn{width:100px;height:30px;text-align:center;line-height:30px;background:#f00;color:#fff;font-size:14px;cursor:pointer;;margin-bottom:20px;}
.hope-form{display:none;margin-bottom:20px;}
td{height:30px;line-height:30px;padding:0px 10px;border:1px solid #ccc;}
.a1{color:red;}
.a2{color:orange;}
.a3{color:yellow;}
.a4{color:green;}
.a5{color:blue;}

4、JavaScript部分:

window.onload = function(){
	var hopeBtn = document.getElementsByClassName('hope-btn')[0];
	var hopeForm = document.getElementsByClassName('hope-form')[0];
	hopeBtn.onclick = show;
	function show(){
		hopeForm.style.display = 'block';
	}
}

(完)!

微信二维码
锐壳主机