记事本效果，鼠标移出即可将内容通过ajax提交上去

控制器代码

渲染记事本板块内容

 

 public function index()
    {
        //判断用户是否登录
        $user=session('user');
        //未登录跳转登录页面
        if (empty($user)) return redirect('admin/login/index');
        //取出用户信息
        $uid=session('user')['id'];
        //查询出用户的记事本内容返回到视图
        $data=collection(\app\admin\model\Note::where('uid',$uid)->select())->toArray();
        return view('index',compact('data'));

    }

 

 

通过ajax提交的用户记事本的内容

 public function save(Request $request)
    {
        //添加记事本内容
        $data['content']=$request->param('content');
        $data['uid']=session('user')['id'];
        $data['time']=date("Y-m-d H:m:s");
        if (\app\admin\model\Note::create($data)){
            return json(['code'=>200,'msg'=>'success','data'=>$data]);
        }
        return json(['code'=>500,'msg'=>'error','data'=>""]);

    }

 

前端html代码

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<div id="app">
    <form>
        <textarea name="content" style="width: 300px;height: 200px" id="text" placeholder="输入内容"></textarea>
        <img src="{$Think.session.user.img}" width="100px">
    </form>
    <div>
        {foreach $data as $v}
        <div style="border-bottom: black solid 2px">
            <p>时间：{$v.time}</p>
            <p>{$v.content}</p>
        </div>
       {/foreach}
    </div>
</div>
</body>
<script>
    $(document).ready(function(){
        $("#text").mouseleave(function(){
            var content=$("#text").val()
            if (content.length>5){
                $.post("{:url('save')}",{content:content},function(result){
                    if (result.code==200){
                        location.reload();
                    }

                });
            }
        });
    });
</script>
</html>

 

posted @ 2021-03-14 16:51  Conqueror·  阅读(56)  评论(0)  编辑  收藏  举报