Jquery加载数据点击事件不刷新页面

jquery load data on click event without page refresh

本文关键字:刷新 事件 加载 数据 Jquery      更新时间:2023-09-26

我的博客里有一个事件日历。它的工作正如我的期望,除了点击事件。因为在点击下一个或前一个链接月不改变其数据。通常情况下,如果点击前一个链接,它应该渲染前一个月,但不工作。同下一个。如何解决?请

(日历)

<dl class="data">
    <dt>Archive</dt>
    <dd class="calendar">   
        <?php
            date_default_timezone_set("Asia/Dhaka");
            if(!isset($_REQUEST['month'])){$month = date("m");}else{$month = $_REQUEST['month'];}
            if(!isset($_REQUEST['year'])){$year = date("Y");}else{$year = $_REQUEST['year'];}
            if(!isset($_REQUEST['day'])){$day = date('d');}else{$day = $_REQUEST['day'];}   
            $timestamp = mktime (0, 0, 0, $month, 1, $year);
            $monthName = date("F", $timestamp);
            $prev_year = $year;
            $next_year = $year;
            $prev_month = $month-1;
            $next_month = $month+1;
            if($prev_month == 0 ){$prev_month = 12;$prev_year = $year - 1;}
            if($next_month == 13 ){$next_month = 1;$next_year = $year + 1;}
            $prev_month = str_pad($prev_month, 2, '0', STR_PAD_LEFT);
            $next_month = str_pad($next_month, 2, '0', STR_PAD_LEFT);
        ?>
        <div class="table">
            <div class="tr caption">
                <div class="th L">
                    <a id="cprev" href="javascript:void(0);">&lsaquo;</a>
                </div>
                <div class="th monyer"><?php echo($monthName.'-'.$year); ?></div>
                <div class='th R'>
                    <a id="cnext" href="javascript:void(0);">&rsaquo;</a>
                </div>
            </div>
            <div class='thead'>
                <div class="td">S</div>
                <div class="td">M</div>
                <div class="td">T</div>
                <div class="td">W</div>
                <div class="td">T</div>
                <div class="td">F</div>
                <div class="td">S</div>
            </div>
            <?php
                $monthstart = date("w", $timestamp);
                $lastday = date("d", mktime (0, 0, 0, $month + 1, 0, $year));
                $startdate = -$monthstart;
                //Figure out how many rows we need.
                $numrows = ceil (((date("t",mktime (0, 0, 0, $month + 1, 0, $year))
                + $monthstart) / 7));
                //Let's make an appropriate number of rows...
                for($k = 1; $k <= $numrows; $k++){
            ?>
            <div class="tr days">
            <?php
                //Use 7 columns (for 7 days)...
                for ($i = 0; $i < 7; $i++){
                    $startdate++;
                    $startdate = str_pad($startdate, 2, '0', STR_PAD_LEFT); //Make dates leading zero
                    if($startdate <= 0){//If we have a blank day in the calendar.
            ?>
            <div class="td L">
                <?php echo("&nbsp;");?>
            </div>
            <?php }elseif($startdate > $lastday){echo('<div class="td R">&nbsp;</div>');}else {
                if(in_array($year.'-'.$month.'-'.$startdate, $dates) && $startdate == date("d") && $month == date("m") && $year == date("Y")){ ?>
            <div class="td today">
                <span class="triangle-up-left"></span>
                    <a href="blog/archives/<?php echo($year.'-'.$month.'-'.$startdate); ?>"><?php echo($startdate); ?></a>
            </div>
            <?php
            } elseif($startdate == date("d") && $month == date("m") && $year == date("Y")){?>
            <div class="td today"><?php echo($startdate); ?></div>
            <?php } else { ?>
            <?php if(in_array($year.'-'.$month.'-'.$startdate, $dates)) { ?>
            <div class="td days">
                <span class="triangle-up-left"></span>
                <a href="blog/archives/<?php echo($year.'-'.$month.'-'.$startdate); ?>"><?php echo($startdate); ?></a>
            </div><?php }else{ ?>
            <div class="td days"><?php echo($startdate); ?></div><?php }?>  
            <?php } } } ?></div><?php } ?>
        </div>
    </dd>
</dl>
<script>
    var maxPages = {{ page.last }};
    var Pmonth = <?php echo($prev_month);?>; 
    var Pyear = <?php echo($prev_year);?>;
    var Nmonth = <?php echo($next_month);?>; 
    var Nyear = <?php echo($next_year);?>;
</script>
(Jquery)

$('#cprev').click(function(e){
    e.preventDefault();
    var pmonth = Pmonth;
    var pyear = Pyear;
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear;
    $.post(url,{pmonth:"pmonth",pyear:"pyear"},function(){
    });
});

将href设置为href='#'将阻止重定向。

也应该在jquery函数结束时返回false,以防止默认操作:

$('#cprev').on('click', function(e){
    var pmonth = Pmonth;
    var pyear = Pyear;
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear;
    $.ajax({
        type:"POST",
        url: url
        data: {pmonth:"pmonth",pyear:"pyear"},
        success: function(result){
            console.log(result);
        },
        error: function(){
        }
   });
    return false;
});

e.preventDefault()并不总是停止页面刷新。

添加return false到你的jQuery点击处理程序的结束,这样应该停止页面重新加载:

$('#cprev').click(function(e){
    e.preventDefault();
    var pmonth = Pmonth;
    var pyear = Pyear;
    var url = 'http://localhost/phalcon3/blog?month='+pmonth+'&year='+pyear;
    $.post(url,{pmonth:"pmonth",pyear:"pyear"},function(){
    });
    return false;
});