记事本功能

当鼠标移出输入框时文本框内容发送至后台，提交保存

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>

 

 

 

后端控制器代码

    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'=>""]);

    }

 

posted @ 2021-03-15 14:35  Conqueror·  阅读(107)  评论(0)  编辑  收藏  举报