合规国际互联网加速 OSASE为企业客户提供高速稳定SD-WAN国际加速解决方案。 广告
我们计划做这么一个流程 > * 制作表单页面 >* 用户输入信息 点击发送按钮 >* 控制器存入数据库 返回json >* 弹出成功提示,三秒后重载页面 结构如下: │ config.php │ GuestbookPlugin.php │ ├─controller │ IndexController.php(新文件) │ ├─data │ config.php │ guestbook.sql │ ├─model │ PluginSyGuestbookModel.php(新文件) │ └─view widget.html(需修改) * * * * * 首先制作前端,修改widget.html模板 为了简单起见,我们就输入一个input---姓名,关键是将整个儿流程跑通 此文件需要加上一些的css js widget.html ~~~ <style type="text/css"> .section-guestbook { background: #c2c9cd; } </style> <div class="section section-guestbook"> <div class="row"> <div class="col-md-8 col-md-offset-2"> <p class="lead">{$desc}</p> <div class="alert alert-success hidden" id="MessageSent"> {$messagesent} </div> <div class="contact-form"> <form id="guestbook-form" class="no-mar" role="form"> <div class="form-group sy-guestbook"> <label for="name">姓名<span class="require-item">*</span></label> <input type="text" class="form-control" id="name" name="name" placeholder=""> <i class="fa fa-user form-control-guestbook"></i> </div> <input id="guestbook-submit" value="提交" class="submit-button btn btn-default"> </form> </div> </div> </div> </div> <script src="__STATIC__/js/layer/layer.js"></script> <script src="__STATIC__/js/ajaxForm.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#guestbook-submit').click(function () { $('#guestbook-form').ajaxSubmit({ url: "{:cmf_plugin_url('guestbook://Index/addMsg')}", type: "post", success: function (data) { //data.code为1代表成功,为0代表失败(cmf固有ajax返回值) if (data.code == 0) { layer.msg(data.msg); } else { $('#MessageSent').removeClass("hidden"); layer.msg(data.msg, function () { setTimeout(function () { parent.location.reload(); }, 300); }); } } }); return false; }); }); </script> ~~~ PluginSyGuestbookModel.php ~~~ <?php namespace plugins\guestbook\model; use think\Model; class PluginSyGuestbookModel extends Model { // 开启自动写入时间戳字段 protected $autoWriteTimestamp = true; } ~~~ 需要注意的是 这个名字一定需要是这个名字 与数据库表名对应才行 不然报错 IndexController.php ~~~ <?php namespace plugins\guestbook\controller; use cmf\controller\PluginBaseController; use plugins\guestbook\model\PluginSyGuestbookModel; class IndexController extends PluginBaseController { /** * 提交留言 */ public function addMsg() { // 获取post数据 $data = $this->request->param(); // 实例化模型 $GuestbookModel = new PluginSyGuestbookModel(); $GuestbookModel->allowField(true)->data($data, true)->save(); $this->success('成功啦'); } } ~~~ 最后的实现效果如下 ![](https://box.kancloud.cn/4a337cc634386bf064568d613f87a727_1417x246.png) ![](https://box.kancloud.cn/edcb62c6c0804914fa20ccaac31157e1_1491x345.png) ![](https://box.kancloud.cn/bfb250e877d601a820a06c9d4aa5245a_1471x249.png) ![](https://box.kancloud.cn/41d0740216ee909bc5fc0b6c451ef54a_1045x217.png) > 首先感谢WelkinVan 他写的《ThinkCMF5从入门到精通》给了我很多帮助 > 点击去《[ThinkCMF5从入门到精通](https://ihavenolimitations.xyz/welkinvan/thinkcmf5)》 >