2021-03-24 上班第二天记录-接口、Ajax部分有所涉及（下）

结合Layui框架
<!--CSS-->
<style>
    .nav {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #eee;
        color: #000;
        font-size: 16px;
        font-weight: 700;
        margin-bottom: 1px;
    }
    .nav span {
        margin: 18px 5px 0px 40px;
        color: #c52d06;
    }
    /*设置表单宽度*/
    .layui-input-inline {
        width: 329px!important;
    }
    /*设置富文本编辑器的margin值*/
    .edui-default .edui-editor {
        margin: 20px 0 20px 121px;
    }
    /*设置富文本编辑器的高度*/
   .edui-editor-iframeholder {
        height: 210px !important;
    }
   /*设置 多图片上传-预览图 里面的图片*/
    #demo2{
        /*让弹性盒元素在必要的时候拆行：盒子在一行内显示不全，则自动换行*/
        display: flex;
        flex-wrap: wrap;
    }
</style>

<!--HTML-->
<!--nav模块-->
<div class="nav">
    <span>|</span> 录 入 信 息
</div>
<!--表单模块-->
<form class="layui-form" action="" style="margin-top: 30px;">
        <!--  第一行表单-->
        <div class="layui-form-item">
            <!-- 普通表单-->
            <div class="layui-inline">
                <label class="layui-form-label">
                    <span style="color: #c80000">*</span>录入人员
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="name" required autocomplete="off" class="layui-input" placeholder="请输入录入人员">
                </div>
            </div>
            <!-- 普通表单-->
            <div class="layui-inline">
                <label class="layui-form-label">
                    <span style="color: #c80000">*</span>排序
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="order" required autocomplete="off" class="layui-input" placeholder="请输入序号">
                </div>
            </div>
        </div>
        <!--  第二行表单-->
        <div class="layui-form-item">
            <!-- 普通表单-->
            <div class="layui-inline">
                <label class="layui-form-label">
                    <span style="color: #c80000">*</span>标题
                </label>
                <div class="layui-input-inline">
                    <input type="text" name="title" required autocomplete="off" class="layui-input" placeholder="请输入标题">
                </div>
            </div>
            <!--单选框-->
            <div class="layui-inline">
                <label class="layui-form-label">
                    <span style="color: #c80000">*</span>是否展示
                </label>
                <div class="layui-input-inline">
                    <input type="radio" name="show" value="0" title="是">
                    <input type="radio" name="show" value="1" title="否" checked="">
                </div>
            </div>
        </div>
</form>
<!--富文本编辑器模块-->
        <!--引入需要的js-->
        <script type="text/javascript" charset="utf-8" src="/static/Ueditor/ueditor.config.js"></script>
        <script type="text/javascript" charset="utf-8" src="/static/Ueditor/ueditor.all.min.js"> </script>
        <script type="text/javascript" charset="utf-8" src="/static/Ueditor/lang/zh-cn/zh-cn.js"></script>
        <!--富文本编辑器相关部分-->
        <div>
            <!--代码编写同上面表单部分前的文字内容-->
            <label class="layui-form-label">
                <span style="color: #c80000">*</span>内容展示
            </label>
            <!--富文本编辑器-->
            <div>
                <script id="editor" type="text/plain" name="content"></script>
            </div>
        </div>
<!--上传图片模块-->
        <div>
            <!--代码编写同上面表单部分前的文字内容-->
            <label class="layui-form-label">
                <span style="color: #c80000">*</span>上传图片
            </label>
            <!--多图片上传部分-->
            <div class="layui-input-block">
                <div class="layui-upload" style="margin-left: 9px">
                    <button type="button" class="layui-btn" id="test2" style="margin-top: 10px;">多图片上传</button>
                    <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;width: 770px">
                        预览图：
                        <div class="layui-upload-list" id="demo2"></div>
                    </blockquote>
                </div>
            </div>
        </div>
<!--立即提交模块-->
        <!--layui表单-立即提交-->
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1" style="margin: 50px 0 20px 9px">立即提交</button>
            </div>
        </div>

<!--JS-->
<!--注意:在js前要先引入layui-->
{include file="system@block/layui" /}
<script>
    // 立即提交-定义一个空数组
    var temp =  [];
    // 富文本编辑器(uEditor)
    var ue = UE.getEditor('editor',{
        autoHeightEnabled: false, //是否自动撑高
        initialFrameWidth: 800,//自适应大小
        autoFloatEnabled: true
    });
    ue.ready(function() {
        //设置编辑器的内容
        ue.setContent('');
        //获取html内容，返回: <p>hello</p>
        var html = ue.getContent();
        //获取纯文本内容，返回: hello
        var txt = ue.getContentTxt();
    });
    UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
    UE.Editor.prototype.getActionUrl = function(action) {
        if (action == 'uploadimage' || action == 'uploadfile') {
            return '/admin.php/system/common/ueupload.html';  //此处改需要把图片上传到哪个Action（Controller）中
        } else {
            return this._bkGetActionUrl.call(this, action);
        }
    };
    // 注意这里的写法规范
    layui.use(['form','upload'], function(){
        var form = layui.form
            ,upload=layui.upload;
        // 多图片上传部分
        upload.render({
            elem: '#test2'
            ,url:'{:url("Content/upload")}'
            ,multiple: true
            ,before: function(obj){
                //预读本地文件示例，不支持ie8
                obj.preview(function(index, file, result){
                    $('#demo2').append('<li style="position: relative;border:1px solid #ccc;width: 100px;height:100px;margin: 0 10px 10px;"><img width="100%" src="'+ result +'" alt="'+ file.name +'" class="layui-upload-img"><span style="position: absolute;right: -4px;top: -4px;width: 10px;height: 10px;text-align: center;line-height: 10px;border:1px solid #c80000;background-color:#c80000;color:#fff;border-radius: 50%;cursor:pointer;display: block" οnclick="delImg(this)">X</span></li>') // οnclick="delImg(this)":点击事件并且调用函数
                });
            }
            ,done: function(res){
                //上传完毕
                console.log(res);
                if(res.code === 200){
                    temp.push(res.imgpath);
                }
            }
        });
        // 立即提交部分
        form.on('submit(demo1)', function(data){
            console.log(data);
            console.log(data.elem) //被执行事件的元素DOM对象，一般为button对象
            console.log(data.form) //被执行提交的form对象，一般在存在form标签时才会返回
            // data.field很重要,是关键
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            data.field.imgs = temp;
            data.field.content = ue.getContent();
            // console.log(data.field);
            $.ajax({
                url:'', // 填写要提交到的接口(由后台人员提供);如若是提交到本地,则为空
                method:'post',
                data:data.field,
                success:function(res){
                    console.log(res)
                },
                error:function(err){
                    console.log(err);
                }
            })
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

    // 函数封装
    // 点击图片右上角的小叉号时,删除该图片,即删除该小叉号的父亲小li(小叉号对应的图片)
    function delImg(obj) { // obj是个形参
        // 第一步:删除形式上的图片
        $(obj).parent().remove();
        // 第二步:删除html里面的图片代码
        var index = $(obj).parent().index(); // 获取图片的索引号
        // splice可以用来删除对应的数组
        temp.splice(index,1); // 1表示删除一张图片
    }
</script>

【补充知识——针对富文本编辑器】假如富文本编辑器一来就展示后台返的数据，并将修改后的数据提交到后台，其操作该如何？见如下两张图片所示：

 

详情可查看官方文档：http://fex.baidu.com/ueditor/#api-common