如何通过ajax增加/减少PHP变量值并重新加载函数

How to Increasing/Decreasing PHP variable value and reload function via ajax

本文关键字:新加载 加载 函数 变量值 ajax 何通过 增加 PHP 减少      更新时间:2023-09-26

我有一个函数,它根据变量指定日期

前任$修改="+1周"

function calendar($modification){
    $month = array("Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December");
    $date = new DateTime(date('Y-m-d'));
    $date->modify($modification);
    $year = $date->format('o');
    $week = $date->format('W');
    $fulldate = $date->format('c');
    $valEnc = 'W';
    $monthNum = $date->format('n');
    $modDate = date('Y-m-d',strtotime($fulldate));

    $mMon = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y") ));
    $mTue = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y") ));
    $mWed = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y") ));
    $mThu = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y") ));
    $mFri = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y") ));
    $mSat = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y") ));
    $mSun = date('n', mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y") ));
    $dayMonth = compact("mMon","mTue","mWed","mThu","mFri","mSat","mSun");
    $mon = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y")));
    $tue = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y")));
    $wed = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y")));
    $thu = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y")));
    $fri = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y")));
    $sat = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y")));
    $sun = date('j',mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y")));
    $days = compact("mon","tue","wed","thu","fri","sat","sun");
    $weekNum = date("W", strtotime("$year$valEnc$week"));
    $mName = $month[($monthNum)-1];
    $yearNum= $date->format('Y');

    $calendar= compact("dayMonth", "days", "weekNum", "mName", "yearNum");   // $calendar['array'][value] / $calendar[value]
    //print_r($calendar);
    return $calendar;
}

如何从页面上的按钮指定$modification,然后重新加载函数?

Ex。增加按钮=+1周,减少按钮=-1周。

编辑:已解决

PHP:

$dMod = $_GET['mod'];
$mod = $dMod;

if ($dMod >= 0) {
    $mod = '+'.$dMod.'';
}

$modification = "".$mod." week";
date_default_timezone_set ("/*TIMEZONE*/");
function calendar($modification){
    $todayweek = date('W', mktime(0, 0, 0, date('m'), date("d"), date("Y") ));
    $today = date('D');
    $month = array("Januari","Februari","Mars","April","Maj","Juni","Juli","Augusti","September","Oktober","November","December");
    $date = new DateTime(date('Y-m-d'));
    $date->modify($modification);
    $year = $date->format('o');
    $week = $date->format('W');
    if ($todayweek==$week && $today=='Fri'){
        $date->modify($modification);
        $year = $date->format('o');
        $week = $date->format('W');
    }
    $fulldate = $date->format('c');
    $valEnc = 'W';
    $monthNum = $date->format('n');
    $modDate = date('Y-m-d',strtotime($fulldate));

    $fMon = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week")), date("Y") );
    $fTue = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+1, date("Y") );
    $fWed = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+2, date("Y") );
    $fThu = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+3, date("Y") );
    $fFri = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+4, date("Y") );
    $fSat = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+5, date("Y") );
    $fSun = mktime(0, 0, 0, date('m', strtotime("$modDate")), date("d", strtotime("$year$valEnc$week"))+6, date("Y") );
    $fulldate = compact("fMon","fTue","fWed","fThu","fFri","fSat","fSun");
    $mMon = date('n', $fMon);
    $mTue = date('n', $fTue);
    $mWed = date('n', $fWed);
    $mThu = date('n', $fThu);
    $mFri = date('n', $fFri);
    $mSat = date('n', $fSat);
    $mSun = date('n', $fSun);
    $dayMonth = compact("mMon","mTue","mWed","mThu","mFri","mSat","mSun");
    $mon = date('j', $fMon);
    $tue = date('j', $fTue);
    $wed = date('j', $fWed);
    $thu = date('j', $fThu);
    $fri = date('j', $fFri);
    $sat = date('j', $fSat);
    $sun = date('j', $fSun);
    $days = compact("mon","tue","wed","thu","fri","sat","sun");
    $weekNum = date("W", strtotime("$year$valEnc$week"));
    $mName = $month[($monthNum)-1];
    $yearNum= $date->format('Y');

    $calendar= compact("fulldate", "dayMonth", "days", "weekNum", "mName", "yearNum");   // $calendar['array'][value] / $calendar[value]
    return $calendar;

}
?>

JS:

$( document ).ready(function() {

var $input = $('#calMod');

        var calCheckWeek = function() {
            var theDate = new Date();
                if(theDate.getDay() >= 5){        //if its friday, switch to next week
                    if ($calMod == 0);{
                       $input.val(1);
                    };
                };
        };
calCheckWeek();
var $calMod = $input.val();


$('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {
    if ($calMod <= 0) {
        $('.calendar-prev-week').hide();
    }
    else {
        $('.calendar-prev-week').show();
    }
    console.log("Calendar loaded successfully!");

    });

    $('.calendar-prev-week').click(function () {

        var $input = $('#calMod');
        var value = parseInt($input.val());
        value = value - 1;

        $input.val(value);
        var $calMod = $input.val();
        if ($calMod <= 0) {
            $('.calendar-prev-week').hide();
        }
        else {
            $('.calendar-prev-week').show();
        }

        $('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {

            console.log("Decreased Week Number");
        });
    });

 $('.calendar-next-week').click(function () {
        var $input = $('#calMod');
        var value = parseInt($input.val());
        value = value + 1;
        $input.val(value);
        var $calMod = $input.val();
        if ($calMod <= 0) {
            $('.calendar-prev-week').hide();
        }
        else {
            $('.calendar-prev-week').show();
        }

        $('.load-div').load('/inc/calendar.php?mod=' + $calMod, function () {
            console.log("Increased Week Number");
        });
    });

我创建了2个按钮增加&减少周,做了一个隐藏的输入"#calMod",因为整个页面不会被刷新(我只在特定的div".loaddiv"中加载日历),所以每次我按下按钮增加或减少周时,该值都不会重置,因为我只想让它显示工作日,所以我添加了一个检查,看看它的星期五是否更多(如果(Date.getDay()>=5),如果是,当第一次加载时,它将更改为下周,您仍然可以返回一周(到当前周),但不能再返回。

现在我的"周"日历按预期工作。

下一步是选择日期并将其存储在JSon中。。感谢您的帮助和想法!

使用HTML button元素在不重新加载页面的情况下调用PHP函数:

calendar.html

<div id="buttons_week">
  <button>+1 Week</button>
  <button>-1 Week</button>
</div>
<div id="calendar"></div>
<script>
// get display target
var calendar = document.getElementById('calendar');
// get buttons and loop
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {
    // add function to click event
    elem.addEventListener('click', function (evt) {
        // set up XHR object
        if ( window.XMLHttpRequest ) {
            xmlhttp=new XMLHttpRequest() // IE7+, Firefox, Chrome, Opera, Safari
        }
        else { // IE6, IE5
            xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange=function() {
            if (xmlhttp.readyState==4 && xmlhttp.status==200) {
// here's where you handle the response you get from the PHP script
                // for debugging
                //calendar.innerHTML = xmlhttp.responseText
                //console.log(JSON.parse(xmlhttp.responseText))
                // parse JSON string from server and update calendar
                var calendar_obj = JSON.parse(xmlhttp.responseText)
                calendar.innerHTML = calendar_obj.weekNum + '/' + calendar_obj.mName + '/' + calendar_obj.yearNum
            }
        }
        xmlhttp.open("GET","calendar.php?mod="+encodeURIComponent(evt.target.innerHTML),true);
        xmlhttp.send();
    })
})
</script>

calendar.php

<?php
echo json_encode(calendar($_GET['mod']));
function calendar($modification){
  // function body here, removed for brevity
}
?>

如果你不需要去服务器上做其他事情,那么这里有一个全JavaScript版本。无需调用服务器!

JSFiddle

<div id="buttons_week">
  <button>+1 Week</button>
  <button>-1 Week</button>
</div>
<div id="calendar"></div>
<script>
var calendar = document.getElementById('calendar');
Array.prototype.forEach.call(document.querySelectorAll('#buttons_week button'), function (elem) {
    elem.addEventListener('click', function (evt) {
        var calendar_obj = week_increment(evt.target.innerHTML)
        console.log(calendar_obj.days)
        console.log(calendar_obj.dayMonth)
        calendar.innerHTML = 
            calendar_obj.weekNum + '/' +
            calendar_obj.mName + '/' +
            calendar_obj.yearNum
    })
})
function week_increment(mod) {
    var dd = new Date()
    var week_inc = 7 * 24 * 60 * 60 * 1000
    if ( 0 === mod.indexOf('-') ) { week_inc *= -1 } // decrement week
    dd = new Date(dd.getTime() + week_inc)
    dd.setHours(0,0,0);
    var dayMonth = [], days = [], weekNum
    dd.setHours(-24 * ((dd.getDay() || 7) - 1))
    for ( ii = 0; ii < 7; dd.setHours(24), ii++ ) {
        days.push(dd.getDate())
        dayMonth.push(dd.getMonth()+1)
        if ( 3 === ii ) { // get weekNum on Thursday ??
            weekNum = Math.ceil((((dd-new Date(dd.getFullYear(),0,1))/8.64e7)+1)/7) // http://stackoverflow.com/a/18005464/2743458
        }
    }
    return { 
        'dayMonth': dayMonth,
        'days':     days,
        'weekNum':  weekNum, 
        'mName':    months[dd.getMonth()], 
        'yearNum':  dd.getFullYear()
    }
}
var months = ['Januari','Februari','Mars','April','Maj','Juni','Juli','Augusti','September','Oktober','November','December'];
</script>