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


    控制器代码

    渲染记事本板块内容

     public function index()
        {
            //判断用户是否登录
            $user=session('user');
            //未登录跳转登录页面
            if (empty($user)) return redirect('admin/login/index');
            //取出用户信息
            $uid=session('user')['id'];
            //查询出用户的记事本内容返回到视图
            $data=collection(appadminmodelNote::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 (appadminmodelNote::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=" 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>
  • 相关阅读:
    解决Flask使用pymysql驱动的Warning: (1366, "Incorrect string value: '\xD6\xD0\xB9\xFA\xB1\xEA...'
    java中的抽象类
    java中的接口
    java中获取数组中的最大值
    java中的面向对象
    java中的数组
    java中的方法
    java中的流程控制结构
    java中的运算符
    java中的类型转换
  • 原文地址:https://www.cnblogs.com/cyxng/p/14533075.html
Copyright © 2020-2023  润新知