ajax实现点击加载更多

Bertha 。 2022-01-12 02:49 514阅读 0赞

**首先定义自己的文章结构**

<div class="news">
            <ul class="list">
                <li class="flex-between">
                    <img src="images/1.jpg" alt="">
                    <div>
                        <p><a href="{
         $list.url}" title="{
         $list.title}">文章标题</a></p>
                        <span>文章简介</span>
                    </div>
                </li>
            </ul>
            <button class="more" id="More">点击加载更多</button>
            
            <p id="cid" style="display:none;">{
        $cid}</p>
    </div>复制代码

<script>
                //新闻栏目ID
                var cid = $('#cid').text();
                //分页，从第二页开始
                var Pages = parseInt('1') + 1;
                //数量
                var Limit = 5;
                //需要追加到哪个元素下
                var Dom = jQuery('.list');
                //#More按钮点击时执行ajax
    
                jQuery('#More').on('click', function() {
                    var url = `http://www.*******.com/index.php/Api/list?cid=${cid}&limit=${Limit}&pages=${Pages}`;
                    jQuery.ajax({
                        //请求类型
                        type: 'POST',
                        //请求地址
                        url: url,
                        //返回数据类型
                        dataType: 'json',
                        //请求成功
                        success: function(response, status) {
                            var Data = response.data;
                            console.log(Data);
                            //如果Data不等于空，证明有数据，开始执行以下方法
                            if (Data != '') {
                                //进行循环，value就是文章对象
                                jQuery.each(Data, function(index, value) {
                                    var Html =
                                        `
                                        <li class="flex-between">
                                        <img src="${value.pic}" alt="${value.title}">
                                        <div>
                                        <p><a href="${value.url}" title="${value.title}">${value.title}</a></p>
                                        <span><if condition = "${value.desc}">{
        $list.desc}<else>{
        $list.content|str2sub=35, true}</if>${value.desc}</span>
                                        </div>
                                        </li>`
                                    //将变量Html的内容追加在事先定义好的变量Dom后
                                    Dom.append(Html);
                                });
                                //分页+=1
                                Pages += 1;
                            }
                            //全部加载完毕提示
                            else {
                                jQuery('#More').text("没有更多内容");
                            }
                        },
    
                        //请求失败
                        error: function(xhr, status, error) {
                            console.log("请求对象XMLHttpRequest: " + xhr);
                            console.log("错误类型textStatus: " + status);
                            console.log("异常对象errorThrown: " + error);
                        }
                    })
                })
    </script>复制代码

转载于:https://juejin.im/post/5ceb51f15188251f633a8422

发表评论取消回复

表情：

评论列表（有 0 条评论，514人围观）

还没有评论，来说两句吧...

相关阅读

相关点击按钮加载更多(js)

/*初始化*/ var counter = 0; /*计数器*/ var pageStart = 0; /*offset*/ var pag...

迈不过友情╰/ 2024年04月19日 12:20/ 0 赞/ 88 阅读

相关 Vue中点击加载更多滚动条滚动到页面最底部

<template> <div> <div class="table-container" ref="table-container">

淩亂°似流年/ 2023年10月11日 13:35/ 0 赞/ 77 阅读

相关 vue中如何实现点击按钮后加载更多数据

一、点击按钮后加载更多的数据显示 1. 在 `data` 中，定义 `pageIndex`，默认为 1 ，默认展示第一页数据。定义 `comments`，默认为空数组，

红太狼/ 2023年07月24日 08:12/ 0 赞/ 27 阅读

相关 vue 实现点击按钮加载更多

<template> <div> <div v-for="(item, key) in list" v-show="key<num">

梦里梦外;/ 2022年10月02日 00:49/ 0 赞/ 287 阅读

相关 angularjs实现点击加载更多

做个人博客时遇到这个需求，首先说下遇到难点： 1.动态插入指令，angular并不能正确渲染，而是以普通的html标签插入，也没有class=”ng-scope”，这与an

谁借莪１个温暖的怀抱￠/ 2022年07月27日 17:29/ 0 赞/ 233 阅读

相关 jquery列表点击加载更多

jquery列表点击加载更多，可点击多次 <!DOCTYPE html> <html> <head> <meta charset="utf-

￡神魔★判官ぃ/ 2022年06月17日 05:27/ 0 赞/ 249 阅读

相关 Java EE之使用ajax完成加载更多

一：效果图 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV

淩亂°似流年/ 2022年04月22日 08:38/ 0 赞/ 238 阅读

相关 vue点击展开更多，点击收起

<template> <div> <div class="menus"> <di

我不是女神ヾ/ 2022年03月21日 08:48/ 0 赞/ 520 阅读

相关 ajax实现点击加载更多

首先定义自己的文章结构 <div class="news"> <ul class="list"> <li

Bertha 。/ 2022年01月12日 02:49/ 0 赞/ 515 阅读

相关织梦dedecms首页列表页,ajax点击加载更多,瀑布流,首页多栏目切换简化版

去年6月写过一个相关教程,发现重复的代码占一大半,现在优化下,更简单. 点击查看原文 [http://blog.csdn.net/viqecel/article/detail

墨蓝/ 2021年09月26日 02:50/ 0 赞/ 307 阅读