weixin_33737774 2013-12-11 20:51 采纳率: 0%
浏览 45

使用Ajax的“显示更多”按钮

I'm trying to do "show more" button with ajax to show new results every click

<input type="hidden" id="direction" value="{$page+1}" />
<script type="text/javascript">
$(document).ready(function(){

 $('#show_more').click(function(){  
    $('#results_ajax').fadeIn("slow").delay(1000);
    var ajax_url = "../profile/results_ajax/";
    var direction = parseInt( $('#direction').val() );
      $.ajax({
        url: ajax_url + direction,
        type : "POST",
        dataType :"html",
        success : function(msg){
            $('#direction').val(direction + 1);
             $('#results_ajax').append(msg)

        }        
      });
    });
    });
</script>

<div style="float: right;width:72%;margin-right:20px;">
<table width="100%" style="border-bottom:0px;">
<tr class="tbl">
<td colspan="4">{$ci->lang->line('results_archive')}</td>
</tr><tr>
<td class="tbl1" style="width: 50%;">{$ci->lang->line('exam_title')}</td>
<td class="tbl2" style="width: 15%;">{$ci->lang->line('score')}</td>
<td class="tbl1" style="width: 15%;">{$ci->lang->line('percentage')}</td>
<td class="tbl2" style="width: 20%;">{$ci->lang->line('date')}</td>
{foreach $results as $result}
<tr>
<td class="tbl1" style="width: 50%;">{$result.id}.{$result.exam_title}</td>
<td class="tbl2" style="width: 15%;">{$result.score} / {$result.full_mark}</td>
<td class="tbl1" style="width: 15%;">{$result.percentage}%</td>
<td class="tbl2" style="width: 20%;">{date('d-m-Y',{$result.date})}</td>
</tr>
{/foreach}
</table>
<div id="results_ajax" style="display:none;"></div>
<button id="show_more">Show More</button>
</div>

so this is my code , but i've small problem, i want to do some loading effect every click, but (fadeIn) effect appears in the first time only, after that the new results appears without any effects, the table appears direct !

  • 写回答

2条回答 默认 最新

  • 谁还没个明天 2013-12-11 20:54
    关注

    Your "Show more" button type looks like the type for submitting a form (that does a form post which then loads a new page). I would suggest changing that to a regular button or cancel the default action so you aren't submitting a form.

    If that still doesn't show your issue, then add an error handler to the ajax call and find out if it is returning an error and, if so, what that error is.

    Also, the .delay(1000) here isn't doing anything:

    $('#results_ajax').fadeIn("slow").delay(1000);

    If you wanted to actually delay the ajax call for a second, you will need to use a setTimeout().

    Combining all these suggestions into your code:

    HTML:

    <button id="show_more">Show More</button>

    Code:

    $('#show_more').click(function(e){  
      e.preventDefault();
      $('#results_ajax').fadeIn("slow");
      setTimeout(function() {
          $.ajax({
            url: "../results_ajax/2",
            type: "POST",
            dataType:"html",
            success: function(msg){
                $('#results_ajax').html(msg)
            },
            error: function(xhr, status, error) {
                console.log(status);
                console.log(error);
            }
          });
      }, 1000);
    });
});
    评论

报告相同问题？

  • 实现ajax加载更多功能
    2014-08-20 09:18
    6. **处理响应**：前端接收到服务器的响应后，JavaScript会解析返回的数据，然后将新数据动态插入到页面的适当位置，同时更新或隐藏“查看更多”按钮，以反映是否还有更多内容可加载。 7. **错误处理**：良好的Ajax...
  • 默认显示三条数据，点击更多显示余下数据
    2017-02-04 15:33
    当用户点击“更多”后，按钮可能变为加载状态，显示一个加载图标或文字提示，让用户知道系统正在处理请求。加载完成后，按钮可以恢复原状，或者显示已加载的数据总数。同时，为了防止用户反复点击导致多次请求，可以...
  • 基于ajax实现点击加载更多无刷新载入到本页
    2020-12-09 09:16
    当用户点击“加载更多”按钮时，`.click()`事件处理程序被触发，隐藏按钮，显示加载动画，并通过`.post()`方法发送Ajax请求。在请求成功时，将返回的数据追加到结果容器中，并滚动页面到按钮位置。如果请求失败，将...
  • php+ajax+jquery实现点击加载更多内容
    2020-10-24 07:40
    在前端，页面上设置一个特定的触发点，通常是一个“查看更多”的链接或按钮。当用户点击这个触发点时，会向服务器发起AJAX请求，请求中携带必要的参数（如当前加载的数据位置信息，或者需要加载的数据的数量等），...
  • PHP+Ajax点击加载更多内容
    2019-11-02 17:18
    在网页开发中，"PHP+Ajax点击加载更多内容"是一个常见的功能，用于提高用户体验，避免一次性加载大量数据导致页面加载速度变慢或者消耗过多流量。这个功能通常应用于新闻列表、社交媒体动态、评论区等需要分页显示...
  • 代码实例ajax实现点击加载更多数据图片
    2020-10-17 21:35
    在本文中，我们将探讨如何使用AJAX技术实现一个点击加载更多数据图片的功能，这是一个常见的前端交互设计，用于分页加载大量图片或内容，提高用户体验。首先，我们来看一下提供的HTML、CSS和JavaScript代码实例。 ...
  • 前端技术(六)—— AJAX详解
    2024-09-01 19:13
    kejizhentan的博客 ajax详解
  • jquery ajax 分页 前端
    2017-09-13 14:43
    // 更多数据项... ]; ``` ### 5. 初始化分页插件 使用`jQueryPage`插件初始化分页功能，设置每页显示的数据量和总页数： ```javascript $(document).ready(function() { var itemsPerPage = 10; // 每页显示条目...
  • 现代前端开发：AJAX与Promise_Async Await结合使用
    2025-06-23 21:45
    AI实战架构笔记的博客 AJAX是实现异步数据交互的重要技术，而Promise和Async Await则为处理异步操作提供了更优雅的方式。本文的目的就是帮助大家理解如何将这三者结合起来，提升前端开发的效率和代码的可维护性。范围涵盖了从基础概念到...
  • PHP+Mysql Ajax动态分页 查看更多
    2013-01-25 14:35
    本主题聚焦于使用PHP、MySQL和Ajax技术实现“查看更多”功能的动态分页。这种技术组合允许用户逐页加载数据，而无需刷新整个页面，从而提供了更流畅的浏览体验。 首先，我们需要理解PHP在其中的角色。PHP是一种...
  • 没有解决我的问题, 去提问