版权声明：本文的所有内容,包括文字,图片,均为原创。对未经许可擅自使用转载者，本人保留追究其法律责任的权利。 https://blog.csdn.net/jxwBlog/article/details/80706521
首先理解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留言板就完成了,有不正确或者不合理的地方欢迎与楼楼私聊~