ajax的应用

Posted 2020-10-20 huiminxu

//js的使用
(function () {
    "use strict";
    // 模板页查询菜单 #category-search-nav
    // 包括下面的四个排序请求 .order-nav
    YOUMO.topic = {
        //功能：添加到收藏夹 被调用：1.templatelist 2.iframe
        _bindFavo:function () {
            $(".topiclist-list ").on(‘click‘,‘a.topic-favo‘,function (event) {
                event.preventDefault();
                var _this = $(this);
                var opt = {
                    callback: function () {
                        var flag = 0;
                        if (_this.hasClass("favo-cur")) {
                            flag = 0;
                        } else {
                            flag = 1;
                        }
                        var _url = basepath + "/template/addToFavorite?templateId=" + _this.attr("id") + "&flag=" + flag + "&radom=" + Math.random()+"type=topic";
                        $.ajax({
                            type: ‘POST‘,
                            url: _url,
                            dataType: "text",
                            data: {},
                            success: function (data) {
                                var _result = "";
                                if (data == "0") {
                                    _result = "<img src=‘" + basepath + "/resource/images/success-figure.jpg‘ width=‘283px‘ height=‘257px‘>" +
                                        "<h3>收藏成功</h3>";
                                } else {
                                    _result = "<img src=‘" + basepath + "/resource/images/success-figure.jpg‘ width=‘283px‘ height=‘257px‘>" +
                                        "<h3>取消收藏</h3>";
                                }
                                var _html = "<div class=‘outwindow outwindow-favo‘ >" + _result + "</div>";

                                if (flag == 0) {
                                    _this.removeClass("favo-cur");
                                } else {
                                    _this.addClass("favo-cur");
                                }
                                layer.open({
                                    type: 1,
                                    shade: 0.4,
                                    area: [‘auto‘, ‘auto‘],
                                    title: false, //不显示标题
                                    content: _html //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

                                });
                            },
                            error: function (er) {
                                console.log("addToFavorite.er=" + er);
                            }
                        });
                    }
                };
                YOUMO.accountOper._isLogin(opt); //是否登录
            });


        }
    };
    YOUMO.topic.topicList=function () {
            this.topiclist= $(".topiclist-list"),
            this.listmore=$(".listmore");
            this.currentPage=1;
            this.init();
            this.initEvent();
    }
    YOUMO.topic.topicList.prototype= {
        constructor :YOUMO.topic.topicList,
        init:function () { //initPage
            this.getTopicList();
        }, initEvent:function () { //initPageEvent
            var that=this;
            that.listmore.on(‘click‘, function (event) {
                event.preventDefault();
                that.currentPage += 1;
                that.getTopicList(that.currentPage);

            });
        },
        getTopicList: function () {
            var that = this,
                i = that.currentPage,//当前页
                _html = "";
            $.ajax({
                type: ‘GET‘,
                url: basepath+‘/topic/list/‘ + i,
                success: function (data) {
                    if (data.list != null && data.list.length > 0) {
                        $.each(data.list, function (i, item) {
                            _html += "<li class=‘topiclist-list-item‘ data-url=‘#‘>" +
                                "<a href=" + basepath + "/topic/detail/" + item.id + "><img src=" + item.topicImage + "></a>" +
                                "<div class=‘floatl‘>" +
                                "<p class=‘name text-ellipsis‘>" + item.topicName + "</p>" +
                                "<p class=‘date‘><i class=‘iconfont‘>&#xe606;</i>" + item.topicPeriod + "</p>" +
                                "</div>" +
                                "<div class=‘flaotr‘>" +
                                "<p><i class=‘iconfont‘>&#xe610;</i><span>" + item.pageView + "</span></p>" +
                                "<p><a class=‘topic-favo‘ id=‘"+item.id+"‘><i class=‘iconfont‘>&#xe672;</i></a><span>" + item.collect + "</span></p>" +
                                "</div>" +
                                "</li>";


                        });
                        that.topiclist.append(_html);
                    }
                    if (i == data.pagerSize) {
                        that.listmore.hide();
                    } else {
                        console.log("show");
                        console.log($(".listmore").html());
                        that.listmore.show();
                    }

                },
                error: function (er) {

                }
            });
        }

    }
})();





//调用js

<script type="text/javascript">
    $(function () {
        "use strict";
        $(".topiclist-list").html("");
        new YOUMO.topic.topicList();
        //绑定收藏
        YOUMO.topic._bindFavo();
    });
</script>

<div class="topiclist-cont container">
    <ul class="topiclist-list clearfix">
        <li class="topiclist-list-item topiclist-list-item1" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><i class="iconfont">&#xe610;</i><span>68</span></p>
                <p><a class="topic-favo"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><i class="iconfont">&#xe610;</i><span>68</span></p>
                <p><a class="topic-favo"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item topiclist-list-item1" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item topiclist-list-item1" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
        <li class="topiclist-list-item" data-url="#">
            <img src="http://192.168.0.121/storeData/ymshop/admin3/index/20170919/秋意.jpg">
            <div class="floatl">
                <p>2018·年会PPT模板精选</p>
                <p class="date"><i class="iconfont">&#xe606;</i>2018年 · 01期</p>
            </div>
            <div class="flaotr">
                <p><a class=""><i class="iconfont">&#xe610;</i></a><span>68</span></p>
                <p><a class="favon"><i class="iconfont">&#xe672;</i></a><span>46</span></p>
            </div>
        </li>
    </ul>
    <a href="#"  class="button more listmore" style="display: none;" data-paper="2">下拉查看更多 </a>
</div>








//样式

.hide-outwindow {
    display: none;
}

.outwindow {
    padding: 25px;
}

.outwindow img {
}

.outwindow h3 {
    text-align: center;
    font-weight: 500;
    margin-top: 10px;
    margin-bottom: 0;
    font-size: 2.5rem;
    color: #5e6a72;
}

/*支付弹出*/
.outwindow-pay {
    padding: 25px 25px 0;
}

.outwindow-pay h3 {
    margin-bottom: 20px;
    margin-top: 10px;
}

.addFri .layui-layer-btn {
    margin: 0 0 10px !important;
    padding: 0 20px 20px !important;
}

.addFri .layui-layer-btn:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden
}

.addFri .layui-layer-btn {
    *+height: 1%;
}

.addFri .layui-layer-btn .layui-layer-btn0 {
    float: left;
}

.addFri .layui-layer-btn .layui-layer-btn1 {
    float: right;
}

.addFri .layui-layer-btn .layui-layer-btn0, .addFri .layui-layer-btn .layui-layer-btn1 {
    font-size: 2rem !important;
    width: 40% !important;
    padding: 8px 0 !important;
    height: auto !important;
    border: 0 !important;
    -webkit-box-shadow: 0 12px 19px 5px #d7d7d7 !important;
    box-shadow: 0 12px 19px 5px #d7d7d7 !important;
    border-radius: 8px !important;
    color: #fff !important;
    box-size: border-box !important;
    width: 40%;
    text-align: center !important;
}

.addFri .layui-layer-btn .layui-layer-btn0 {
    background-image: -webkit-linear-gradient(to right, #84f1db, #7bd18a) !important;
    background-image: linear-gradient(to right, #84f1db, #7bd18a) !important;
}

.addFri .layui-layer-btn .layui-layer-btn0:hover {
    border: 0 !important;
    color: #fff !important;
}

.addFri .layui-layer-btn .layui-layer-btn0:active {
    box-shadow: none !important;
    color: #fff !important;
}

/* 收藏弹出 */
.outwindow-favo {
}

.outwindow-favo img {

}

.outwindow-favo h3 {

}


/*-------------------------------------------------------------------------
                         Diy  Common css  用户长传
----------------------------------------------------------------------------*/

iframe{border-radius: 2px; overflow: hidden;}

.form-control[disabled] {
    cursor: Default;
}

/* row more*/
.row_add {
    display: block;
}

.row_add:after {
    clear: both;
}

/*nav */
.nav_bottom {
    float: left;
}

.nav_bottom > li {
    width: 126px;
    float: left;
    margin-right: 84px;
}

.nav_bottom > li.active {
    border-bottom: 4px solid #46b749;
    padding-bottom: 5px;
}

.nav_bottom > li:last-child {
    margin-right: 0;
}

.nav_bottom > li > a {
    font-size: 18px;
}

/*icon*/
.icon_user, .icon_tip {
    background: url(‘../images/icon.png‘) no-repeat;
    display: inline-block;
    position: relative;
    top: 3px;
}

.icon_user {
    width: 22px;
    height: 22px;
    background-position: -31px -348px;
    top: 5px;
}

.icon_tip {
    width: 14px;
    height: 14px;
    background-position: -31px -5px;
}

.icon_dropdown {
    width: 17px;
    height: 10px;
    background-position: -31px -27px;
}

.figure_circle {
    font-size: 28px;
}

/*情景背景色*/
.bg-yozo {
    background-color: #47b84a;
    color: #fff;
}

/*按钮*/
.btn-success {
    background-color: #47b84a !important;
}

.btn-yozo {
    background-color: #c4c7c8 !important;
    min-height: 40px;
    border: 0;
    color: #fff;
    border-radius: 0 !important;
}
.btn-yozo:hover,
.btn-yozo:focus,
.btn-yozo:active,
.btn-yozo:visited{
    color: #fff !important;
    background: #449d44;
    border:0;
}
.btn-green {
    background-color: #48b84b !important;

}
.group-list-yozo{}

.list-group-item_yozo{padding:0;}

.list-group-item_yozo.active,
.list-group-item_yozo.active:hover,
.list-group-item_yozo.active:focus {
    background-color: #48b84b;
    border-color: #48b84b;
}
.list-group-item_yozo.active a{color:#fff; }
.list-group-item_yozo a{padding:10px 15px; display: block;}
.a-link{color:#00c091;}
.a-link:visited{color:#00c091;}


/*tooltip rewrite */


/*table*/
.table-yozo {

}

.table-yozo th {
    text-align: center;
    background: #ecf0f1;
    color: #666;
    font-weight: normal;
}

.table-yozo td {
    text-align: center;
    border-left: 1px solid #ddd;
}
/* panel */
.panel-default{}

/*yozo panel*/
.panel-yozo {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: #666
}

.panel-yozo .panel-body {
    font-size: 20px;
    font-weight: normal;
    text-align: center;
    color: #666
}

/*---------------layer.js 样式 重写 -*/
.layui-layer-btn .layui-layer-btn0 {
    border-color: #48b84b !important;
    background-color: #48b84b !important;
    color: #fff;
}

/*-------------价格隐藏-----------*/

/*显示免费图标*/
@font-face {
    font-family: ‘iconfont‘;
    src: url(‘../icon/iconfont.eot‘);
    src: url(‘../icon/iconfont.eot?#iefix‘) format(‘embedded-opentype‘),
    url(‘../icon/iconfont.woff‘) format(‘woff‘),
    url(‘../icon/iconfont.ttf‘) format(‘truetype‘),
    url(‘../icon/iconfont.svg#iconfont‘) format(‘svg‘);
}

.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}







//yomo.js的使用

(function() {
   "use strict";
   // 油墨命名空间
   var YOUMO = {};
    // 账户操作
    YOUMO.accountOper = {
        _isLogin:function (option) {
            $.ajax({
                type: ‘GET‘,
                url: basepath + "/paygate/acccheck",
                success: function (data) {
                    if (data == ‘-1‘) {//提示用户要先登陆
                        var _result = "使用此功能需要先登录！";
                        layer.alert(_result);
                    } else {
                        option.callback();
                    }
                },
                error: function (er) {
                    console.log(er);
                    if(er.status == 401){
                        redirectUserCentral();
                    }
                }
            });
        }
    };
    // 模板下载
    YOUMO.templateOper={
        //功能：免费下载 被调用：1.iframe 2.index 3.templatelist 4.order 5.download.5.积分支付成功,6.在线支付成功
        _bindDownload:function (ischeckLogin) {
            $(".btn-mfdownload").on(‘click‘, function (event) {
                event.preventDefault();
                var _this=$(this),templateId=_this.data("templateid");
                //流量监测
                var cfrom;
                if(_this.data("cfrom")){cfrom=_this.data("cfrom");}else{cfrom="免费下载";};
                _czc.push([‘_trackEvent‘,cfrom,‘‘,,templateId]);
                var option={
                    id:templateId,
                    ele:_this
                }
                if(ischeckLogin){
                    var opt = {
                        callback: function () {
                            mfDownLoad(option);
                        }
                    };
                    YOUMO.accountOper._isLogin(opt); //是否登录

                }else{
                    mfDownLoad(option);
                }


            });
        },
    //功能：添加到收藏夹 被调用：1.templatelist 2.iframe
        _bindFavo:function () {
                $(".favo").click(function (event) {
                    event.preventDefault();
                    event.stopPropagation();
                    var _this = $(this);
                    var opt = {
                        callback: function () {
                            var flag = 0;
                            if (_this.hasClass("favo-cur")) {
                                flag = 0;
                            } else {
                                flag = 1;
                            }
                            var _url = basepath + "/template/addToFavorite?templateId=" + _this.attr("id") + "&flag=" + flag + "&radom=" + Math.random();
                            $.ajax({
                                type: ‘POST‘,
                                url: _url,
                                dataType: "text",
                                data: {},
                                success: function (data) {
                                    var _result = "";
                                    if (data == "0") {
                                        _result = "<img src=‘" + basepath + "/resource/images/success-figure.jpg‘ width=‘283px‘ height=‘257px‘>" +
                                            "<h3>收藏成功</h3>";
                                    } else if (data == ‘1‘) {
                                        _result = "<img src=‘" + basepath + "/resource/images/success-figure.jpg‘ width=‘283px‘ height=‘257px‘>" +
                                            "<h3>已添加，无需重复添加</h3>";
                                    } else {
                                        _result = "<img src=‘" + basepath + "/resource/images/success-figure.jpg‘ width=‘283px‘ height=‘257px‘>" +
                                            "<h3>取消收藏</h3>";
                                    }
                                    var _html = "<div class=‘outwindow outwindow-favo‘ >" + _result + "</div>";

                                    if (flag == 0) {
                                        _this.removeClass("favo-cur");
                                    } else {
                                        _this.addClass("favo-cur");
                                    }
                                    layer.open({
                                        type: 1,
                                        shade: 0.4,
                                        area: [‘auto‘, ‘auto‘],
                                        title: false, //不显示标题
                                        content: _html //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响

                                    });
                                },
                                error: function (er) {
                                    console.log("addToFavorite.er=" + er);
                                }
                            });
                        }
                    };
                    YOUMO.accountOper._isLogin(opt); //是否登录
                });


            }

};
 //分页
    YOUMO.paginationOper={
        init:function (option) {
            var current_page=option.pagerOffset/option.pagerPageSize,link_to;

            if(option.Urlargument){
                link_to=option.pagerPagerUrl+"?"+option.Urlargument+"&pager.offset=__id__";
            }else{
                link_to=option.pagerPagerUrl+"?"+"pager.offset=__id__";
            }
            $("#Pagination").pagination(option.pagerTotal, {
                items_per_page:option.pagerPageSize,
                link_to:link_to,
                current_page:current_page   //当前页索引
            });

        }
    };
    
    // 暴露到全局
   window.YOUMO = YOUMO;
})();