首先理解ajax是實現頁面無刷新效果,留言就是要這種效果,當發佈留言時候直接展示留言內容在下面.
好了直接上代碼
1.新建一個控制器,內容如下:
<?php
namespace app\index\controller;
use think\Controller;
class Index extends Controller
{
public function index() //首頁默認方法
{
$model = new \app\index\model\Leaveword(); //實例化模型
$leaveData = $model->selData(); //查詢已有數據,首頁進行展示
$this->assign('leaveData',$leaveData); //渲染模板數據
return $this->fetch('leaveword-form'); //渲染模板
}
public function leave() //留言方法
{
if($this->request->isAjax()) //判斷是否爲ajax請求
{
$post = $this->request->post(); //接收請求傳遞的數據
$post['leavetime'] = time(); //獲取當前時間存入數據數組中
$model = model('Leaveword');
$addRes = $model->doleave($post); //執行留言添加
if($addRes)
{ //判斷添加留言結果
$newdata = $model->selOne(); //查詢最新留言信息
$newdata['leavetime'] = date('Y-m-d H:i:s',$newdata['leavetime']);
$this->success('留言成功','Index/index',$newdata,0);
}
else
{
$this->error('留言失敗');
}
}
}
}
2.創建對應模型
<?php
namespace app\index\model;
use think\Model;
class Leaveword extends Model
{
protected $table = 'leaveword'; //模型對應表名
public function doleave($post) //添加留言方法
{
return $this->save($post);
}
public function selData() //查詢數據方法
{
return $this->order('leavetime desc')->select();
}
public function selOne() //最新添加留言方法
{
return $this->order('leavetime desc')->find();
}
}
3.視圖層
主要是一些樣式,這個可以自己調整自己喜歡的樣式(樓主引用了一個bootstrop的樣式)
主要看下面的ajax部分,替換插入數據是重點,下面會有相應註釋:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="{:url('/')}bootstrap/bootstrap.min.css">
<title>Document</title>
</head>
<body class="container">
<table>
<tr>
<td>留言:<textarea name="leavecontent" id="leaveword" cols="30" rows="3" class="form-control"></textarea></td>
</tr>
<tr>
<td>姓名:<input type="text" name="uname" id="leavename" class="form-control"></td>
</tr>
<tr>
<td>
<button type="button" class="btn btn-primary" value="提交" id="subleave" style="margin-top: 10px">提交留言</button>
</td>
</tr>
</table>
//這是首頁展示內容
<table class="table table-striped table-hover" style="margin-top: 30px;">
<thead>
<tr>
<th>id</th>
<th>留言人</th>
<th>留言內容</th>
<th>留言時間</th>
</tr>
</thead>
<tbody id="box">
<?php foreach($leaveData as $k=>$v) {?>
<tr> //把查詢的數據循環展示
<td><?php echo $v['id']?></td>
<td><?php echo $v['uname']?></td>
<td><?php echo $v['leavecontent']?></td>
<td><?php echo date('Y-m-d H:i:s',$v['leavetime'])?></td>
</tr>
<?php }?>
</tbody>
</table>
</body>
</html>
// *首先引入jquery文件
<script src="{:url('/')}jquery-min.js"></script>
<script> // *獲取提交按鈕,給點擊事件
$('#subleave').on('click',function (){
var leavecontent = $('#leaveword').val();
var uname = $('#leavename').val(); //獲取對應的值
$.ajax({ //發送ajax請求,對應4個參數,url,data,type,datatype
url:"{:url('Index/leave')}",
data:{leavecontent:leavecontent,uname:uname},
type:'post',
dataType:'json',
success:function(res) //執行成功回調函數
{
if(res.code == 1) //判斷返回結果
{ //進行插入行內容拼接
var str = '<tr>\n' +
'<td>'+res.data.id+'</td>\n' +
'<td>'+res.data.uname+'</td>\n' +
'<td>'+res.data.leavecontent+'</td>\n' +
'<td>'+res.data.leavetime+'</td>\n' +
'</tr>';
$('#box').prepend(str); //插入替換行
}
}
})
})
</script>
4.這樣ajax留言板就完成了,有不正確或者不合理的地方歡迎與樓樓私聊~